如何在商店过滤器功能中获取 viewModel 对象？

Question

我定义了商店和过滤器。 ViewModel 包含test 对象，我需要按此对象过滤商店项目。

Ext.define('XXX.view.XXX.ViewXXXXModel', {
    extend: 'Ext.app.ViewModel',

...

    stores: {
        agreements: {
            source: 'XXX',
            filters: {
                filterFn: function(item) {
                    return item.some_field !== this.get('test').somevalue;
                }
            }
        }
    }

我无法通过过滤功能访问 View Model 的测试对象？

Answer 1

现在为时已晚，但我也遇到了同样的问题，更简洁的方法是将 filterFn 作为公式绑定返回：

对于您的原始示例：

stores: {
    agreements: {
        source: 'XXX',
        filters: [{
            filterFn: '{storeFilter}'
            }]
        }
    }
},
formulas: {
   storeFilter: function(get) {
        var somevalue = get('test').somevalue;
        return function(item) {
            return item.some_field !== this.get('test').somevalue;                
        };
   }
}

编辑： 当我最初写这篇文章时，我不知道 Ext 在使用 setFilters 时不断添加额外的过滤器，而不是仅仅替换它们。为了解决这个问题，您需要使用 id 来命名过滤器。在上面的例子中是这样的：

        filters: [{
            id: 'myVMFilterFunction',
            filterFn: '{storeFilter}'
            }]

然后它按预期替换过滤器

Answer 2

理想情况下，您会在大多数情况下使用声明式过滤器格式 - 粒度确保绑定更具体，在数据更改时触发适当/预期的更新。例如：

stores: {
    agreements: {
        source: 'XXX',
        filters: {
            property: 'some_field',
            value: '{test.somevalue}',
            operator: '!='
        }
    }
}

---

如果您真的想使用命令式代码，您可以通过公式注入视图模型范围：

formulas: {
    _this: function(){
        return this;
    }
}

然后像这样绑定它：

stores: {
    agreements: {
        source: 'XXX',
        filters: {
            scope: '{_this}',
            filterFn: function(item){
                return item.some_field !== this.get('test.somevalue'));
            }
        }
    }
}

这有点麻烦，对test 的更改可能不会反映在商店和与之相关的任何视觉组件中。在这种情况下，您最终不得不手动重新加载商店或重新应用过滤器 - 这与 MVVM 的意义相悖。