KnockOutJS-단일 뷰의 다중 ViewModel ViewModel을 만들어 단일 View에로드하는 것이

하나의 ViewModel로 각보기를 처리하기에는 응용 프로그램이 너무 커지고 있다고 생각합니다.

그래서 여러 ViewModel을 만들어 단일 View에로드하는 것이 얼마나 어려운지 궁금합니다. 또한 X ViewModel 데이터를 Y ViewModel 데이터로 전달할 수 있어야 개별 ViewModel이 서로 통신하거나 최소한 서로를 인식 할 수 있어야합니다.

예를 들어 <select>드롭 다운이 있습니다. 선택 드롭 다운에는 선택된 상태가있어 선택한 항목의 ID를 <select>별도의 ViewModel에서 다른 Ajax 호출 로 전달할 수 있습니다 ….

단일 View에서 수많은 ViewModel을 다루는 데 대한 모든 점은 높이 평가했습니다. 🙂

답변

모두 동일한 페이지에 있어야하는 경우이를 수행하는 한 가지 쉬운 방법은 다른 뷰 모델의 배열 (또는 속성 목록)을 포함하는 마스터 뷰 모델을 갖는 것입니다.

masterVM = {
    vmA : new VmA(),
    vmB : new VmB(),
    vmC : new VmC(),
}

그런 다음 masterVM필요한 경우 페이지 자체에 대한 다른 속성을 가질 수 있습니다. 이 상황에서을 통해 릴레이 masterVM하거나 $parent/ $rootin 바인딩 또는 다른 사용자 정의 옵션을 사용할 수 있으므로 뷰 모델 간의 통신은 어렵지 않습니다 .

답변

녹아웃은 이제 여러 모델 바인딩을 지원합니다. 이 ko.applyBindings()메소드는 선택적 매개 변수 (요소 및 바인딩이 활성화 될 하위 항목)를 사용합니다.

예를 들면 다음과 같습니다.

ko.applyBindings(myViewModel, document.getElementById('someElementId'))

이렇게하면 ID someElementId및 해당 하위 항목이있는 요소로 활성화가 제한 됩니다.

자세한 내용은 설명서 를 참조하십시오.

답변

이것은 단일 뷰에서 많은 ViewModel이있는 매우 큰 프로젝트를 완료 한 후의 대답입니다.

HTML보기

    <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
    <div id="container1">
        <ul>
            <li >Container1 item</li>
            <!-- ko foreach: myItems -->
            <li>Item <span data-bind="text: $data"></span></li>
            <!-- /ko -->
        </ul>
    </div>

    <div id="container2">
        <ul>
            <li >Container2 item</li>
            <!-- ko foreach: myItems -->
                <li>Item <span data-bind="text: $data"></span></li>
            <!-- /ko -->
        </ul>
    </div>

    <script src="js/jquery-1.11.1.js"></script>
    <script src="js/knockout-3.0.0.js"></script>
    <script src="js/DataFunction.js"></script>
    <script src="js/Container1ViewModel.js"></script>
    <script src="js/Container2ViewModel.js"></script>

</body>
</html>

이보기를 위해 두 개의 별도 자바 스크립트 파일에서 id = container1 및 id = container2에 대한 두 가지보기 모델을 만들고 있습니다.

Container1ViewModel.js

function Container1ViewModel()
{
    var self = this;
    self.myItems = ko.observableArray();
    self.myItems.push("ABC");
    self.myItems.push("CDE");

}

Container2ViewModel.js

function Container2ViewModel() {
    var self = this;
    self.myItems = ko.observableArray();
    self.myItems.push("XYZ");
    self.myItems.push("PQR");

}

그런 다음이 두 개의 뷰 모델이 DataFunction.js에 별도의 뷰 모델로 등록 된 후

var container1VM;
var container2VM;

$(document).ready(function() {

    if ($.isEmptyObject(container1VM)) {
        container1VM = new Container1ViewModel();
        ko.applyBindings(container1VM, document.getElementById("container1"));
    }

    if ($.isEmptyObject(container2VM)) {
        container2VM = new Container2ViewModel();
        ko.applyBindings(container2VM, document.getElementById("container2"));
    }
});

이와 같이 별도의 div에 여러 개의 뷰 모델을 추가 할 수 있습니다. 그러나 등록 된 div 안에 div에 대해 별도의 뷰 모델을 만들지 마십시오.

답변

녹아웃 JS에 대한 MultiModels에게 플러그인을 확인 – https://github.com/sergun/Knockout-MultiModels

답변

이를 달성하기 위해 컴포넌트를 사용합니다. ( http://knockoutjs.com/documentation/component-overview.html )

예를 들어, 개발중인이 컴포넌트 라이브러리가 있습니다 : https://github.com/EDMdesigner/knobjs

코드를 파헤 치면 예를 들어 노브 버튼 구성 요소를 여러 곳에서 재사용한다는 것을 알 수 있습니다.

답변