2

Knockout、jQuery DataTables + custom KnockOut DataTables、Bootstrap ページネーションなど、いくつかのコンポーネントを接続しました。これは、次の例に基づいています: http://chadmullins.com/javascript/knockout-js-series-part-2-binding-knockout -js-to-a-datatables-grid/

これで、ページネーションのコントロールの 1 つをクリックするまで、これはすべて完全に機能します。どういうわけか「有効」バインディングが壊れているようです。

これはバインディングです：

<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 をアイテム データモデルに配置することで、ステータスが更新されたときに、ノックアウトはページを移動するときに画面を更新する方法を認識します。パフォーマンスの観点からは、画面が再描画されるたびにカートを検索してその中にあることを確認する必要がなくなるため、高速です。

http://jsfiddle.net/photo_tom/K8hhx/4/で更新。実際のコード変更はかなり小さいです。

ところで: この Datatables/Knockout を今後のプロジェクトで使用することを考えています。実際のサンプルを確認すると便利です。

于 2012-12-07T01:07:42.897 に答える