knockoutjs에서 추적 목록 겹치기

Question

개체가 여러 목록 중 하나에있는 응용 프로그램이 있습니다. 하나의 목록에 대한 UI는 각 항목을 기타 목록에있는 것으로 표시해야합니다.

function Item(id, panel) { 
    var that = this; 
    this.id = id; 
    this.viewModel = panel; 
    this.isSelected = ko.computed(function(){ 
     return panel.isSelected(that); 
    }); 
} 

function Panel() { 
    var that = this; 

    //my two lists 
    this.all = ko.observableArray(); 
    this.selected = ko.observableArray(); 

    this.isSelected = function(item){ 
     return _(that.selected()).find(function(thing){ 
      console.log("iterating"); 
      return thing.id == item.id; 
     }); 
    }; 
} 

var panel = new Panel(); 
ko.applyBindings(panel); 

//add some things to the list 
for(var i=0; i<40; i++){ 
    var item = new Item(i, panel) 
    panel.all.push(item); 
    //let's select some of them. note it's actually a different object 
    if (i % 2 == 0){ 
     panel.selected.push(new Item(i, panel)); 
    } 
}; 
​ 

바이올린은 여기에 있습니다 : : 제가 구현 한 내용의

조잡한 단순화 된 버전이있다 그래서 http://jsfiddle.net/89j52/5/

, 패널 밖으로 항목을 참조를주는 불확실성을 넘어, 그것을 또한 끔찍한 수행합니다. 선택한 목록에 다른 항목을 추가 할 때마다 에 대한 선택 상태가 모두 다시 계산되기 때문에 모든 항목이입니다. iterating을 얼마나 자주 인쇄하는지 주목하십시오. 왜 그렇게하는지 이해하지만 고통 스럽습니다.

이제 분명히 은 실제로에 추가 할 때마다 확인해야합니다. 예를 들어 항목에 대한 조회 표를 숨긴 ​​다음 선택한 목록에 항목이 추가 될 때 올바른 표를 업데이트 할 수 있습니다. 그러나 Knockout의 관측 가능/계산 된 물건과 어떻게 결혼하고 UI를 눈에 띄지 않게 만들지는 모르겠다. 녹아웃의 숙어 내에서 어떻게해야합니까?

Answer 1

당신이 정기적으로 관찰 (계산되지 않음) 에 isSelected을 변환하고 직접 선택한 목록에 항목을 추가 할 때마다이를 업데이트하는 경우 : 매우 우아하지만 확실히 더 효율적으로하지

function select(item){ 
    panel.selected.push(item); 
    var itemInAll = _(panel.all()).find(function(thing){ 
     return thing.id === item.id; 
    }); 
    itemInAll.isSelected(true); 
} 

합니다. 패널에 대한 참조를 의 항목에 그대로 둘 필요가 없습니다. 여기에 전체 코드가 있습니다 : http://jsfiddle.net/89j52/9/