Question

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

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

Answer 1

我个人会在你的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;
}

在dom更新后，Knockout订阅触发器

1 个答案: