2

dom が更新された後にトリガーされるサブスクライブを処理するにはどうすればよいですか? 「偶数」のcssクラスを与えることにより、テーブルの偶数の表示行を更新するjQueryを実行しようとしています。carsOnlyサブスクライブ機能は、車のアイテムのみを表示するかどうか、またはすべてのアイテムを表示するかどうかを切り替えるプロパティの変更をリッスンしています。

問題:私のサブスクライブでは、DOM が更新される前に偶数行の CSS を設定する jQuery が実行されるため、行に「偶数」クラスが追加され、DOM が最終的に更新されるとすぐに非表示になります。

HTML:

<input type="checkbox" data-bind="checked: carsOnly" /><label>Show cars only</label>
<tbody data-bind="foreach: items">
  <tr data-bind="visible: !viewModel.carsOnly() || isCar()">
    <td data-bind="text: vehicleType"></td> <!-- would display 'car' or 'truck' -->
  </tr>
</tbody>

J:

var viewModel = ko.mapping.fromJS({
  carsOnly: true,
  items: [{vehicleType:'car'},{vehicleType:'car'},{vehicleType:'truck'}]
});

viewModel.carsOnly.subscribe(function(newVal) {
  // problem is, this fires off _before_ any of the rows in the table are made invisible
  $("tbody tr").removeClass("even");
  $("tbody tr:visible:even").addClass("even");
});

ko.applyBindings(viewModel);

CSS:

tbody tr.even { background-color: blue; }
4

1 に答える 1

0

個人的には、viewModel にフィルターを適用して、DOM に適用されるアイテムのリストを取得します。次に、CSS セレクターtr:nth-child(even)を使用してストリッピングを適用します。

jsフィドル

HTML 

<input type="checkbox" data-bind="checked: carsOnly" />
<label>Show cars only</label>
<table>
<tbody data-bind="foreach: filteredItems">
    <tr>
        <td data-bind="text: vehicleType"></td>
        <!-- would display 'car' or 'truck' -->
    </tr>
</tbody>
</table>

JS 

var viewModel = ko.mapping.fromJS({
    carsOnly: true,
    items: [{
        vehicleType: 'car'
    }, {
        vehicleType: 'car'
    }, {
        vehicleType: 'truck'
    },{
        vehicleType: 'car'
    }, {
        vehicleType: 'car'
    }, {
        vehicleType: 'truck'
    }]
});
viewModel.filteredItems = ko.computed(function() {
    var filter = this.carsOnly();
    if (!filter) {
        return this.items();
    } else {
        return ko.utils.arrayFilter(this.items(), function(item) {
            return 'car' === item.vehicleType()
        });
    }
}, viewModel);


ko.applyBindings(viewModel);

CSS 

tr:nth-child(even) {
  background-color: red;
}


tr:nth-child(odd) {
  background-color: white;
}
于 2014-03-20T23:02:33.873 に答える