녹아웃 필터링

Question

바인딩 내가하는 방법에 대한 몇 가지 지침을 찾고 있어요 다음을 작업하기 : http://jsfiddle.net/gdefilippi/qgr1s51s/4/

을 바이올린에서 나는 두 observableArrays있어 위. 하나는 다른 하나에 필터를 제공합니다. 이것은 더 큰 프로젝트에서 비동기 호출에 적용됩니다.

어쨌든 나는 세그먼트로 반복하고 있으며 세그먼트로 필터링 된 항목을 반복합니다. 모든 것이 잘됩니다.

항목을 observableArray 항목으로 밀어 넣으면 결과가 리바운드되지 않습니다. 리바 인 딩이 정확하고 쉽게 작동하도록하려면 어떻게해야합니까? 아래의 코드와 피들에서 observableArray 항목 (add 함수 참조)에 항목을 추가하는 추가 기능을 찾으려면 바인딩이 필터링 함수에 대한 것입니다.

샘플 : 그것은 UI를 업데이트 할 수 있도록

var vm = function(){ 
    var self = this; 
    self.items = ko.observableArray([ 
     {label:'item1',segment:1}, 
     {label:'item2',segment:2} 
    ]); 
    self.segments = ko.observableArray([ 
     {title:'Segment 1',id:1}, 
     {title:'Segment 2',id:2} 
    ]); 
    self.bysegment = function(segment){ 
     return ko.utils.arrayFilter(self.items(), function (_item){ 
      return _item.segment === segment; 
     }); 
    }; 
    self.add = function(id){ 
     self.items.push({ 
      label:'new', 
      segment:id 
     }); 
     alert(items().length) 
    }; 
}; 
ko.applyBindings(vm); 

<!-- ko foreach: segments --> 
<h1 data-bind="text: title + ' : ' + id"></h1> 
    <!-- ko foreach: bysegment(id) --> 
    <span data-bind="text: label + ' : ' + segment"></span> 
    <!-- /ko --> 
<button type="button" data-bind="click: add">Add</button> 
<!-- /ko --> 

덕분에, 제프리

Answer 1

http://jsfiddle.net/gdefilippi/qgr1s51s/9/

HTML :

<!-- ko foreach: segments --> 
<h1 data-bind="text: title + ' : ' + id"></h1> 
    <!-- ko foreach: bysegment(id) --> 
    <span data-bind="text: label + ' : ' + segment"></span> 
    <!-- /ko --> 
<button data-bind="click: add">Add</button> 
<!-- /ko --> 

응 vaScript :

var vm = function(){ 
    var self = this; 
    self.items = ko.observableArray([ 
     {label:'item1',segment:1}, 
     {label:'item2',segment:2} 
     ]); 
    self.segments = ko.observableArray([ 
     {title:'Segment 1',id:1}, 
     {title:'Segment 2',id:2} 
    ]); 

    self.bysegment = function(id){ 

     return ko.utils.arrayFilter(self.items(), function (_item){ 
      return _item.segment === id; 
     }); 
    }; 

    self.add = function(obj){ 

     self.items.push({ 
      label:'new', 
      segment:obj.id 
     }); 
    }; 
}; 
ko.applyBindings(vm); 

Answer 2

세그먼트에 의해 함수는 녹아웃 관찰 변수가 아닙니다. 이 값을 computed variable으로 만들 수 있으며 계산 된 변수를 얻기 위해 사용하는 관측 가능한 변수가 업데이트되면 계산 된 변수도 업데이트됩니다. 그래서 그것은 귀하의 목록입니다.

또는 세그먼트를 다음과 같이 별도의 모델로 가져 와서 구조화 된 모델 바인딩을 만들 수 있습니다. 여기

내가 변경하여 fiddle

var segment = function (data) { 
    var self = this; 

    self.id = ko.observable(data.id); 
    self.title = ko.observable(data.title); 

    self.items = ko.observableArray(data.items); 


    self.newItem = function (data) { 
     self.items.push({ 
      label: 'new', 
      segment: data.id() 
     }); 
     alert(self.items().length); 
    } 
} 

과 주요 VM의

var vm = function() { 
    var self = this; 
    var dbItems = [{ 
     label: 'item1', 
     segment: 1 
    }, { 
     label: 'item2', 
     segment: 2 
    }]; 

    var dbSegments = [{ 
     title: 'Segment 1', 
     id: 1 
    }, { 
     title: 'Segment 2', 
     id: 2 
    }]; 

    self.segments = ko.observableArray([]); 

    ko.utils.arrayForEach(dbSegments, function (item) { 
     self.segments.push(new segment({ 
      id: item.id, 
      title: item.title, 
      items: ko.utils.arrayFilter(dbItems, function (_item) { 
       return _item.segment === item.id; 
      }) 
     })); 
    }); 

}; 
ko.applyBindings(vm);