Knockout.js：如何根据可观察数​​组中的更改来更改值？

Question

我有一个Knockout.JS可观察数组，它是列表的基础：

  self.list_elements = ko.observableArray([
     new list_element("0001", "product 1", "3.99")
  ]);

此数组中的变量是可观察的：

function list_element ( id, name, price ) {
   this.item_id = ko.observable(id);
   this.item_name = ko.observable(name);
   this.item_price = ko.observable(price);
}

还有一个详细信息视图，我想填写单击的列表元素的数据，例如：

<span data-bind="text: an_item_id"></span>

填充此函数的函数从单击处理程序中获取相应的数组项。

self.fill_form = function ( array_item ) {
    // array_item is the array element corresponding to the selected list element
}

如何将详细信息视图与数组中的值相关联，以便更改数组中的值显示在详细信息视图中？

Answer 1

通常，您可以创建一个selected可观察对象，并使用当前选定的项目填充它。然后，您将使用with呈现具有特定于所选项目的上下文的部分。

类似的东西：

var ViewModel = function() {
    var self = this;
    this.list_elements = ko.observableArray([...]);

    this.selected = ko.observable();

    this.fill_form = function(item) {
        self.selected(item);
    };
};

然后，你会绑定一个像：

这样的部分

<div data-bind="with: selected">
   ...
</div>

如果您不需要在fill_form函数中执行任何逻辑，那么您甚至可以直接将点击绑定到您选择的observable，因为该项将作为第一个参数传递给observable（这是一个函数）并设置其值。

以下是一个示例示例：http://jsfiddle.net/rniemeyer/YPKk2/