0

我有一个 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
}

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

4

1 回答 1

0

通常，您将创建一个selectedobservable 并使用当前选定的项目填充它。然后，您将使用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/

于 2012-08-08T16:35:16.647 回答