jquery - Knockout + jQuery 数据表 "enable"单击分页后绑定(bind)丢失

Question

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

现在，这一切都很完美 - 直到我单击分页控件之一。似乎“启用”绑定(bind)以某种方式中断了。

这是绑定(bind):

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

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

有人见过这个吗？

Answer 1

在使用 knockout 时，您遇到了一个微妙但常见的问题。

问题出在 $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 放入项目数据模型中，当其状态更新时，knockout 知道如何在您分页时更新屏幕。从性能的角度来看，它更快，因为每次重新绘制屏幕时，您不再需要搜索购物车来查看是否在其中。

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

顺便说一句:我正在考虑在即将到来的项目中使用这个数据表/knockout ，有一个真实的样本可供查看将会很有用。