2

我已经连接了几个组件：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/

有人见过这个吗？

4

1 回答 1

2

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

问题出在下面的$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/更新。实际的代码更改相当小。

顺便说一句：我正在考虑在即将到来的项目中使用这个 Datatables/Knockout，如果有一个真实的样本可供查看，将会很有用。

于 2012-12-07T01:07:42.897 回答