0

現在、正常に機能するリスト内の行をストライプするノックアウトバインディングがあります

ko.bindingHandlers.stripe = {
    update: function (element, valueAccessor, allBindingsAccessor) {
        var value = ko.utils.unwrapObservable(valueAccessor()); //creates the dependency
        var allBindings = allBindingsAccessor();
        var even = allBindings.evenClass;
        var odd = allBindings.oddClass;

        //update odd rows
        $(element).children(":nth-child(odd)").addClass(odd).removeClass(even);
        //update even rows
        $(element).children(":nth-child(even)").addClass(even).removeClass(odd); ;
    }
}

トリガー元

<button data-bind="click: addWidget" style="display:none">Add Item</button>

私が抱えている問題は、サーバーからデータをリロードするときです。ビュー モデルで addWidget() を手動で呼び出します。ストライプ バインディング ハンドラは適用されません。HTML ボタンをクリックすると、すべての行が同じ色で表示され、バインディングが発生し、ストライプが表示されます。

var ViewModel = function() {

     self.addWidget();

});

このカスタム バインディングを js で手動で再適用することは可能ですか?

ありがとう

編集：

ストライプバインディングはこのように適用されます

<div data-bind="foreach: widgets, stripe: widgets, evenClass: 'light', oddClass: 'dark'">
4

3 に答える 3

1

ゼブラ効果 - 良い答えであり、jsfiddleの例です。

または、リストまたはテーブル タグ要素 ( jsfiddle ) の foreach ループでインデックス var を使用するだけです。

<ul data-bind="foreach: myList">
    <li data-bind="css: { 'even': ($index() % 2 == 0) }">
        The value is <span data-bind="text: $data"></span>
    </li>
</ul>
于 2012-07-11T05:35:09.937 に答える
1

これにCSSを使用することはできませんか？何かのようなもの：

div.widget:nth-child(2n) { background: grey; }

次に、追加方法に関係なく、各行が更新されます。

于 2012-07-11T06:16:00.167 に答える
0

縞模様の効果を得るには、Knockout は必要ありません。Tom Hall が提案するような CSS を使用してください。ただし、あなたが主張する場合は、ここにあなたの問題に対する私の見解があります（あなたがko 2.1.x+を使用していると仮定します）：

HTML

<table>
    <tbody data-bind="foreach: rows">
        <tr data-bind="css: {odd: $index()%2} ">
            <td>Test Data</td>
        </tr>
    </tbody>
</table>

JS

var VM = {
    rows: [{},{},{},{},{}]
};

ko.applyBindings(VM);

あなたがする必要があるのは、CSS クラスを提供することだけです.odd。偶数行にもスタイルを設定したい場合は、デフォルトの背景色をオンにするか、「奇数」条件が否定された要素に適用されるクラスを<tr>提供できます。.even

ここに働くフィドルがあります

于 2012-07-12T08:41:57.297 に答える