Knockout.js의 관측 가능 속성 변환

Question

바인딩을 사용하여 바인딩하는 레코드가 observableArray입니다. 이것은 잘 작동합니다. 각 레코드의 변경 사항을 추적하고자하므로 observableArray은 observable으로 구성됩니다. 이것도 작동합니다.

이제 각 레코드의 속성 중 일부 (예 : observable)를 다른 유형으로 변환하는 것이 좋습니다.

어떻게해야합니까?

일반적으로 computed을 사용할 수 있지만이 경우 여러 개가 필요하므로이 경우에는 computed을 하나의 어레이에 추가 할 수 없습니다.

어떻게 해결할 수 있습니까?

Answer 1

여기 observableArray의 각 항목을 래핑하는보기 모델을 사용하는 솔루션입니다. 그리고이 뷰 모델에는 계산 된 속성이 포함될 수 있습니다.

var ItemViewModel = function (value) { 
    this.value = ko.observable(value); 
    this.computedValue = ko.computed(function() { 
     return this.value() * 2;   
    }, this);  
}; 

var ViewModel = function (list) { 
    var self = this; 
    self.list = ko.observableArray([]);     
    ko.utils.arrayForEach(list, function (value) { 
     self.list.push(new ItemViewModel(value)); 
    }); 
}; 

ko.applyBindings(new ViewModel([1,2,3])); 


<ul data-bind="foreach: list"> 
<li data-bind="text: computedValue"></li> 
</ul> 

Answer 2

관찰 할 수있는 배열의 항목 인 매개 변수를 사용하는 함수를 뷰 모델에 추가 할 수 있습니다. 바인딩은 dependentObservable 내부의 함수를 실행하므로 값에 액세스 한 관측 가능 객체는 종속성을 생성합니다.

따라서, 예를 들어, Ryan Niemeyer's jsFiddle에서 다음과 같은 마크 업 할 수 있습니다 : 함수가 매개 변수를 사용하는 경우

var viewModel = { 
    text: ko.observable("one"), 
    items: [{name: "one"}, {name: "two"}, {name: "three"}], 
}; 

viewModel.shouldThisBeVisible = function(name) { 
    return this.text() === name; 
}.bind(viewModel); 

ko.applyBindings(viewModel);​ 

결정적인 비트가 :

type "one", "two", or "three": <input data-bind="value: text" /> 
<hr /> 
<ul data-bind="template: { name: 'itemTmpl', foreach: items }"></ul> 

<script id="itemTmpl" type="text/html"> 
    <li data-bind="text: name, visible: viewModel.shouldThisBeVisible(name)"></li> 
</script>​ 

.. 뷰 모델을 'name'입니다. 귀하의 경우, 이것은 관찰 가능한 배열의 항목입니다.

희망이 도움이됩니다.