Knockout.js：如何根据可观察数组的变化来改变值？答案

【问题标题】：Knockout.js: How to have values change based on changes in an observable array?Knockout.js：如何根据可观察数组的变化来改变值？
【发布时间】：2012-08-09 00:35:16
【问题描述】：

我有一个作为列表基础的 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>

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

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

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

【问题讨论】：

是像主/细节一样的细节视图，其中细节显示一个选择项，还是细节视图只是整个数组的列表？
详细视图显示选定的项目。

标签： javascript knockout.js observable

【解决方案1】：

通常，您会创建一个selected observable 并使用当前选定的项目填充它。然后，您将使用 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 函数中执行任何逻辑，那么您甚至可以直接将点击绑定到您选择的可观察对象，因为该项目将作为第一个参数传递给可观察对象（即一个函数）并设置它的值。

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

【讨论】：

谢谢。绝对可以更轻松地处理其中的值。