javascript - 在 ractivejs 的键路径中使用助手

Question

我有一个在单击元素时调用的函数，我正在比较两个数组。第一个数组使用过滤数组的表达式打印到 DOM。

Handlebars :

{{#each search(~/budgets, searchValue, 'accountName'):i}}
    <p on-click="compareValues">{{accountName}}</p>
{{/each}}

JS:

Ractive.on('compareValues', function(target) {
    if(Ractive.get(target.keypath + '.accountName') === Ractive.get(target.keypath.replace('budgets', 'accounts') + '.accountName') {
        console.log(true);
    } else {
        console.log(false);
    }
});

我得到的 target.keypath 示例是 "${search(budgets,searchValue,"accountName")}.4"。

我希望能够将这个结果数组与另一个也会通过表达式的数组进行比较，因此我尝试使用替换，以便它可以切换表达式中使用的数组。

是否只能在已经通过表达式并且已经有结果的数组上使用表达式，因为我在更改数组时变得不确定？

Answer 1

您可以只使用事件上下文来获取数组中的当前项:

ractive.on('compareValues', function() {
    var current = this.event.context,
        index = this.event.index.i;
});

否则，您可以为搜索定义一个计算属性:

var r = new Ractive({
    el: document.body,
    template: '#template',
    computed: {
        search: function(){
            var budgets = this.get('budgets'),
                searchValue = this.get('searchValue'),
                searchField = this.get('searchField')

            return budgets.filter(function(each){
                return each[searchField] = searchValue;
            });
        }
    }
});

然后你可以在模板中使用:

{{#each search:i}}
    <p on-click="compareValues">{{accountName}}</p>
{{/each}}

并通过 api:

ractive.get('search.' + index + '.accountName')