javascript - knockout js 阻止现有的 html observable 更新

Question

我刚刚开始学习 knockout.js，并且在管理 observables 和正确更新它们方面有点卡住了。有关代码，请参阅 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

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

此外，your fiddle在我看来设计过度。

以下是我从您的示例中收集的内容，但采用了一种不那么复杂的方式。

• 制作独立的独立 View 模型。理想情况下，让它们能够从您传递给构造函数的数据中 self 引导。
• 使用模板可以保持 View 的 HTML 整洁，并提高模块化和可重用性。
• 对于更复杂的数据，请考虑使用映射插件来引导您的模型。
• 咨询Unique ids in knockout.js templates一种创建工作的方法 <input>/<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;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>

<div class="container">
    <div class="m-col-6">
        <ul data-bind="foreach: products">
            <li data-bind="template: 'productTemplate'"></li>
        </ul>
    </div>
</div>

<hr />
<pre data-bind="text: ko.toJSON($data, null, 2)"></pre>

<script type="text/html" id="productTemplate">
    <h1 data-bind="text: title"></h1>
    <p data-bind="text: id"></p>
    <div data-bind="with: newItem">
        <input type="checkbox" data-bind="checked: productClip" />
        <label>has pump clips</label>
        <input type="number" data-bind="value: productQty" />
        <button data-bind="click: $parent.addItem">add to list</button>
    </div>
    <ul data-bind="foreach: items">
        <li>
            <!-- ko template: 'itemsTemplate' --><!-- /ko -->
            <button data-bind="click: $parent.removeItem">Remove</button>
        </li>
    </ul>
</script>

<script type="text/html" id="itemsTemplate">
    <b data-bind="text: $parent.title"></b>
    <span data-bind="text: productClip() ? 'has' : 'does not have'"></span> pump clips
    (<span data-bind="text: productQty"></span>)
</script>