Knockout에서 뷰 모델을 링크/동기화하는 가장 좋은 방법은 무엇입니까?

Question

한 페이지에 여러 개의보기 모델이있는 경우 어떻게 동기화 할 수 있는지 확인하십시오. 예를 들어 하나의 항목을 추가하거나 하나의보기 모델에서 단추를 클릭하고 다른보기 모델이 해당 변경 사항에 민감하도록하려면 Knockout이 기본적으로이를 관리 할 수 ​​있거나 일부 메시징 또는 게시/하위 구조를 사용하는 것이 좋습니다.

나는 관측 대상을 모델간에 관리하지 않아도되고 싶다.

Answer 1

Knockout 2.0에는 기본 pub/sub를 수행 할 수있는 기능이 포함되어 있습니다. 다음은 두 개의 뷰 모델이 조정자를 통해 통신하는 샘플입니다.

var postbox = new ko.subscribable(); 

var ViewModelOne = function() { 
    this.items = ko.observableArray(["one", "two", "three"]); 
    this.selectedItem = ko.observable(); 
    this.selectedItem.subscribe(function(newValue) { 
     postbox.notifySubscribers(newValue, "selected"); 
    }); 
}; 

var ViewModelTwo = function() { 
    this.content = ko.observable(); 
    postbox.subscribe(function(newValue) { 
     this.content(newValue + " content"); 
    }, this, "selected"); 
}; 

ko.applyBindings(new ViewModelOne(), document.getElementById("choices")); 
ko.applyBindings(new ViewModelTwo(), document.getElementById("content")); 

제 뷰 모델은 특정 주제에 우편함 및 제 뷰 모델 토픽에 가입을 통지한다. 그들은 서로에게 직접적인 의존성이 없습니다.

분명히 우편함은 글로벌 일 필요는 없으며 뷰 모델 생성자 함수로 전달되거나 자체 실행 기능 내에서 생성 될 수 있습니다.

샘플 : 또한 http://jsfiddle.net/rniemeyer/z7KgM/

상기 postbox 막을 수있는 ko.observable합니다 (ko.subscribable 기능을 포함한다).

Answer 2

당신은 모순 된 목표를 향해 몰고있는 것 같습니다. 넉 아웃 (Knockout)에서 관찰 할 수있는 방법은 관찰 가능 (Observable)을 만드는 것이지만 아직까지는 그것을 원하지 않는 것 같습니다.

관찰 대상이있는 Foo 및 Bar 개체가있는 경우 Foo에서 막대 또는 부사와 상호 작용하는 관찰 대상을 원하지 않을 수 있지만 Foo 및 Bar를 감시하고 중재하는 위젯이없는 이유는 무엇입니까?

Answer 3

최근 프로젝트에서이 문제를 해결하기 위해 작은 확장 프로그램을 만들었습니다. 방법론이 약간 비슷하지만 게시 된 관찰 가능 항목에 직접 구독을 추가하고 게시 된 관찰 가능 항목을 선언하기 전에 구독자를 대기열에 추가합니다.

Knockout PubSub

Answer 4

나는 내가 observableArray에 대해 뭔가 흥미로운 것을 발견 그러나 RP Niemeyer

의 우편함 라이브러리를 사용하고 동기화 모델을 발견하는 방법. 그래서 저는 새로운 대답을 만들었습니다. Niemeyer의 답을 완성하기 만하면됩니다.

postbox 및 observableArray를 사용하면 observableArray에서 요소를 추가하거나 제거 할 때 "subscribeTo"및 "publishOn"이벤트가 발생합니다. 배열 내 요소를 업데이트 할 때 아무 것도 실행되지 않습니다. 나는 이것이 우편함 라이브러리와 관련이 없지만 녹아웃 제한이라고 생각한다.

관찰 가능 어레이의 요소를 업데이트 할 때 이벤트를 얻으려는 경우에는 우편함 라이브러리에서 "게시"및 "가입"메소드를 사용하는 것이 좋습니다.

다음 FIDDLE

코드 참조 참조하십시오 : 당신이 모든 페이지에 검색 상자 모델을 가지고있는 상황에 대해

function FundEntity (fund) 
{ 
    var self = this; 
    self.id = fund.id; 
    self.fundName = fund.fundName; 
    self.description = fund.description; 
    self.isFavorite = ko.observable(fund.isFavorite); 
} 


function GridViewModel(model) { 
    var self = this; 
    self.fundList = ko.observableArray(); 
    model.funds.forEach(function(fund) { 
     self.fundList.push(new FundEntity(fund)); 
    }); 
    self.favorite = function (id, index) { 
     var newValue = { 
      id: id, 
      index: index, 
      isFavorite: self.fundList()[index].isFavorite() 
     }; 
     ko.postbox.publish("itemChanged", newValue); 
     return true; 
    }; 
    self.isEditable = ko.observable().subscribeTo("myEditableTopic"); 
} 

function FundDetailViewModel(model) { 
    var self = this; 
    self.fundList = ko.observableArray(); 
    model.funds.forEach(function(fund) { 
     self.fundList.push(new FundEntity(fund)); 
    });  
    ko.postbox.subscribe("itemChanged", function (newValue) {   
     self.fundList()[newValue.index].isFavorite(newValue.isFavorite);   
    }); 
    self.editable = ko.observable(false).publishOn("myEditableTopic"); 
}