knockout.js - 在 Knockout.js 中转换 observable 的属性

Question

我有一个observableArray使用template绑定绑定的记录。这工作正常。因为我想跟踪每条记录的变化，所以observableArray由observables 组成。这也有效。

我现在想要的是将每条记录（即 each observable）的一些属性转换为不同的类型。

我应该如何进行？

通常，我可以使用 a computed，但在这种情况下，我不能将单个computedobservable 添加到数组中，因为我需要多个。

那么我该如何解决呢？

Answer 1

您可以向视图模型添加一个函数，该函数接受一个参数，该参数是可观察数组中的项目。绑定将在 a 内运行函数dependentObservable，因此任何访问了其值的可观察对象都将创建一个依赖项。

因此，例如，从Ryan Niemeyer 的 jsFiddle中，您可以使用以下标记：

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>​

.. 使用视图模型：

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);​

关键位是函数接受参数的位置'name'。在您的情况下，这将是您可观察数组中的一个项目。

希望这可以帮助。

Answer 2

这是一个使用视图模型包装 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>