Question

我已经连接了几个组件：Knockout，jQuery DataTables +自定义KnockOut DataTables，Bootstrap分页等。它基于这个例子：http://chadmullins.com/javascript/knockout-js-series-part-2-binding-knockout-js-to-a-datatables-grid/

现在，这一切都完美无缺 - 直到我点击其中一个分页控件。似乎某种方式“启用”绑定中断了。

这是绑定：

<button data-bind="click: $parent.AddToCart, enable: !$parent.InBasket($data)">Add</button>

请原谅我链接到小提琴，但对于依赖关系，我认为这是演示“问题”的最简单方法。小提琴：http://jsfiddle.net/K8hhx/

之前有人见过这个吗？

Answer 1

使用淘汰赛时，你有一个微妙但常见的问题。

问题出在$parent.InBasket($data)函数调用中，如下所示。

    <td>
        <button class="btn btn-mini btn-primary" type="button" 
               data-bind="click: $parent.AddToCart, 
               enable: !$parent.InBasket($data)">
                  Add</button>
    </td>

问题是该功能不是一个可观察的。虽然它看起来没问题，但它可能会导致你看到的问题。

我将html更改为

    <td>
        <button class="btn btn-mini btn-primary" type="button"
            data-bind="click: $parent.AddToCart, enable: !InBasket()">Add</button>
    </td>

项目数据模型是 -

var CartItem = function(name) {
    var self = this;
    self.Name = ko.observable(name);
    self.InBasket = ko.observable(false);  /// NEW
}

通过将InBasket放入项目数据模型中，当状态更新时，淘汰赛知道如何在您翻页时更新屏幕。从性能的角度来看，它更快，因为每次重绘屏幕时，您不再需要搜索购物车以查看其中的内容。

在http://jsfiddle.net/photo_tom/K8hhx/4/处更新。实际代码更改相当小。

BTW：我想在即将开展的项目中使用这个Datatables / Knockout有一个真实的样本可供查看。

点击分页后，Knockout + jQuery数据表“启用”绑定丢失

1 个答案: