Question

我刚刚开始学习knockout.js并且在管理observable并正确更新它们时有点困惑。请参阅jsfiddle获取代码。

 self.addItem = function(item, event){
    ptitle = $(event.currentTarget).prev('h3').text();

    self.items.push({
      productQty: self.productQty(),
      productClip: self.productClip(),
      productTitle: ptitle
    });
  }

http://jsfiddle.net/L61qhrc1/

我拥有的是现有html元素的列表。我想从该列表创建另一个列表，其中包含一些可以设置的输入字段。它主要起作用，但我无法从网络上的例子中找出答案。

当一个字段更新列表更新中的所有字段但我只想要更新当前正在更新的字段而不是整个列表。

任何善良的人都能指出我正确的方向吗？欢呼声。

Answer 1

正如我在评论中所说，您的用户界面必须是您的数据和视图模型的逻辑结果。您的viewmodel绝不能关注视图的细节。

此外，your fiddle对我来说看起来过于设计。

以下是我从你的样本中收集到的内容，但是以较少的拜占庭方式收集。

制作单独的自包含视图模型。理想情况下，使它们可以从传递给构造函数的数据中自行引导。
使用模板可以保持视图的HTML清晰，并提高模块性和可重用性。
对于更复杂的数据，请考虑使用映射插件来引导模型。
有关创建有效x*500 + y*300 + z*400 = total sum / <input>对的方法，请参阅Unique ids in knockout.js templates。

<label>

function ListItem(data, parent) {
    var self = this;
    data = data || {};

    self.productQty = ko.observable(data.productQty);
    self.productClip = ko.observable(!!data.productClip);
}

function Product(data) {
    var self = this;
    data = data || {};

    self.title = ko.observable(data.title);
    self.id = ko.observable(data.id);
    self.items = ko.observableArray();
    self.newItem = new ListItem();

    self.addItem = function () {
        self.items.push(new ListItem(ko.toJS(self.newItem), self));
    };
    self.removeItem = function (item) {
        self.items.remove(item);
    };
}

function ProductList(data) {
    var self = this;
    data = data || {};

    self.products = ko.observableArray(ko.utils.arrayMap(data.products, function (p) {
        return new Product(p);
    }));
}

var vm = new ProductList({
    products: [
        {title: "ProductName 1", id: "ProductId 1"},
        {title: "ProductName 2", id: "ProductId 2"}
    ]
});

ko.applyBindings(vm);

ul {
    list-style-type: none;
    padding: 5px;
}

knockout js阻止现有的html observable更新

1 个答案: