如何在 ractivejs 模板中调用数组过滤器答案

【问题标题】：how to call array filter within ractivejs template如何在 ractivejs 模板中调用数组过滤器
【发布时间】：2014-11-17 22:34:33
【问题描述】：

所以我不想使用数据函数（假设我希望最终用户只与模板交互而不是硬编码 javascript。）如果我有这个带有 n 元素的数组，我该如何过滤它以便在 ractive 模板中获取 m 元素？现在我有这个 code >> http://jsfiddle.net/t168vymw/4/ 工作不正常。

要求：我不能使用某些功能进行过滤，例如 data: {filtersomething: function(){...} } 而是让用户从模板中进行复杂的数组函数转换。 ractive 还支持这个吗？

【问题讨论】：

标签： ractivejs

【解决方案1】：

如果你想对用户的任意 js 打开它，那么你可以这样做（http://jsfiddle.net/h7ut7cbx/2/）：

<input value='{{filter}}'>
<br>
{{# filtered }}
    {{.}}<br>
{{/ }}

和

data: {
    a: [1,2,3,4,5,6],
    filter: 'b%2'
},
computed: {
    filtered: function(a, filter){
        var fn = new Function('b', 'return ' + (this.get('filter')||'true') + ';')
        return this.get('a').filter(fn)
    }
}

【讨论】：

这是一个理想的解决方案，但用户无法编辑 Ractive js 实例。感谢您的帮助
他们不需要。 filter: 'b%2' 只是一个默认值。还是我错过了什么？

【解决方案2】：

Ractive 不支持在表达式中涉及 function 关键字的任何内容，但有 3 种方法可以做到这一点：

数据函数，
方法调用（从模板内部调用 ractive 实例的方法），
直接在模板中过滤数据。

您说您希望所有逻辑都在模板中，这样我们就可以选择#3。例如，如果您只想显示列表中的偶数，您可以这样做：

{{ #a }}
    {{ #!(this % 2) }}
        {{ this }}
    {{/}}
{{ /a }}

但是，这通常被认为是一种反模式。允许用户编写自定义 JS 或为他们提供一些可以在模板中使用的准备好的函数可能是一个更好的主意。

【讨论】：

我知道这是一种反模式，在模板中使用 javascript 有点丑陋，但要求用户远离 js 代码。感谢您的帮助。