knocket js阻止现有的html observable进行更新

knockout js prevents existing html observable from updating

本文关键字：observable html 更新 js knocket      更新时间：2023-09-26

我刚开始学习knockout.js，有点拘泥于管理可观察性并正确更新它们。有关代码，请参阅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元素的列表。我想从这个列表中创建另一个列表，其中包含一些可以设置的输入字段。它基本上是有效的，但我无法从我一直在看的网络上的例子中找出答案

当一个字段更新列表中的所有字段时，会更新，但我只希望更新当前正在更新的字段，而不是整个列表。

有什么好心人能给我指个正确的方向吗？干杯

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

此外，在我看来，你的小提琴设计得太过火了。

以下是我从你的样本中收集到的，但不那么拜占庭式。

  • 制作独立的独立视图模型。理想情况下，使它们能够从您传递给构造函数的数据中引导自己
  • 使用模板可以保持视图的HTML整洁，并提高模块性和可重用性
  • 对于更复杂的数据，可以考虑使用映射插件来引导您的模型
  • 有关创建工作<input>/<label>对的方法，请参阅knockout.js模板中的Unique id

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>

相关文章：