2

如何处理dom 更新后触发的订阅？我正在尝试运行一些jQuery，通过给它们一个“偶数”的css类来更新表上的偶数可见行。subscribe 函数正在监听一个属性的变化carsOnly，它会切换是否只显示汽车项目，或者是否应该显示所有项目。

问题：在我的订阅中，设置偶数行的 CSS 的 jQuery在 dom 更新之前运行，因此它向行添加“偶数”类，然后当 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>

JS：

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)应用您的剥离。

jsFiddle

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 回答