멀티 뷰 애플리케이션을위한 knockoutjs 패턴의 예

멀티 뷰 애플리케이션을위한 knockoutjs 패턴의 예

---

두 개의 복잡하고 상당히 다른 (일부 공유 구성 요소가 있지만)보기를 포함하는 응용 프로그램을 구축하고 있습니다. 한보기에서는 사용자가 쿼리를 실행하고 검색 결과를 볼 수 있으며 다른보기는 최근 활동에 대한 개요를 제공합니다. 관련 예는 이메일 화면과 연락처 화면이있는 PIM 앱일 수 있습니다. 두 작업 세트는 상당히 다르지만 그 사이에 구조적 유사성도 있습니다. 애플리케이션을 구축 할 때 검색 결과보기부터 시작했습니다. 이제 두 번째 코드를 생성해야하며 코드 구성의 모범 사례에 대해 궁금합니다.

각 응용 프로그램 "보기"에 대해 별도의 개체 (하위보기 모델)를 만들고 if / ifnot 바인딩을 사용하여 전환합니까? 보기 간의 공통점 중 하나는 각보기에 스크롤 가능하고 필터링 가능하며 페이징 가능한 개체 목록이 있다는 것입니다. 공통 정렬 / 필터 UI를 가질 수 있도록 목록 간의 차이점을 제거해야합니까? 아니면 사용자 지정 바인딩 만 공유하는 두 개의 병렬 인터페이스 만 만들어야합니까?

감사,

유전자

---

이것으로 갈 수있는 몇 가지 방향이 있습니다.

한 가지 옵션은 ko.applyBindings다음과 같은 별도의 DOM 요소에 대해 별개의 뷰 모델 을 호출 하는 것입니다.

var viewModelA = { name: "Bob" };
var viewModelB = { price: 50 };

ko.applyBindings(viewModelA, document.getElementById("aContainer"));
ko.applyBindings(viewModelB, document.getElementById("bContainer"));

http://jsfiddle.net/9abgxn8k/

이 경우 요소가 서로의 조상이 아닌지 확인하고 싶을 것입니다 (아무것도 두 번 바인딩하고 싶지 않음).

또 다른 옵션은 하위보기 모델을 사용하는 것입니다.

var subModelA = { name: "Bob" };
var subModelB = { price: 50 };

var viewModel = {
  subModelA: { name: "Bob" },
  subModelB: { price: 50 }
};

ko.applyBindings(viewModel);

이 방법에서는 with각보기 모델과 함께 표시 할 영역에 바인딩 을 사용 합니다. 하위 모델 또는 상위 모델의 플래그로 가시성을 제어 할 수 있습니다.

내가 좋아하는 또 다른 옵션은 "뷰"에 약간의 구조를 부여하고 다음과 같은 작업을 수행하는 것입니다.

var View = function(title, templateName, data) {
   this.title = title;
   this.templateName = templateName;
   this.data = data; 
};

var subModelA = {
    items: ko.observableArray([
        { id: 1, name: "one" },
        { id: 2, name: "two" },
        { id: 3, name: "three" }
      ])
};

var subModelB = {
    firstName: ko.observable("Bob"),
    lastName: ko.observable("Smith") 
};


var viewModel = {
    views: ko.observableArray([
        new View("one", "oneTmpl", subModelA),
        new View("two", "twoTmpl", subModelB)
        ]),
    selectedView: ko.observable()    
};

ko.applyBindings(viewModel);

http://jsfiddle.net/rniemeyer/PctJz/

참고 URL : https://stackoverflow.com/questions/8676988/example-of-knockoutjs-pattern-for-multi-view-applications