Question

我有一个从可观察数组创建的表。表行包含属于一组类别之一的元素。要根据类别过滤表格，有一排按钮。

按钮可以是活动的或非活动的，通过敲除绑定的CSS类指示：

<button data-bind="click: filter.filterCategory, css: { filterOn: filter.category.isFiltered() }">Filter</button>

通过切换行的显示状态来完成表中的过滤：

<tr data-bind="css: { nonDisplay: !table.category.isDisplayed() }">
</tr>

click处理程序主要按顺序设置两个observable的值，例如

vm.filter.category.isFiltered(true);

vm.table.category.isDisplayed(false);

原则上这是有效的。

问题在于没有立即给出用户已经选择过滤器按钮的指示，而是取决于过滤本身的执行时间，即对表的改变。

对于较大的表格，特别是在移动设备上，这可能意味着延迟几秒钟。

我可以忍受过滤本身这么长时间，但反馈需要立竿见影。

是否有办法确保在基于vm.filter.category.isFiltered的较长时间运行更改开始之前应用vm.table.category.isDisplayed上的更改？

Answer 1

这似乎是异步失败。您应该在isFiltered方法中实现一个回调方法参数，类似于

var vm = vm || {};
vm.filter = vm.filter || {};

vm.filter.category = (function($){
    var that = this;

    that.isFiltered = function(booleanValue, callback) {

            // Put your primary code here
        console.log("this runs first");

            // ...when the first code is done 
        callback();

    };

    that.isDisplayed = function(booleanValue) {
        console.log("this runs second");
    };

    return that;
})($);

// Implement by stating a method as the second parameter.
vm.filter.category.isFiltered(true, function(){ vm.filter.category.isDisplayed(false); });

这将呈现

// this runs first
// this runs second

确保首先处理敲除绑定

1 个答案: