Ractive.js 继续和中断循环答案

【问题标题】：Ractive.js continue and break loopsRactive.js 继续和中断循环
【发布时间】：2015-05-20 16:23:17
【问题描述】：

我有一个正在迭代的列表：

<ul>
    {{#list}}
    <li>{{this.value}}</li>
    {{/list}}
</ul>

如果 {{this.hidden}} 为真，我将如何继续循环？

我想做这样的事情：

{[#if this.hidden]} {[continue]} {[/if]}

RactiveJS 可以做到吗？

【问题讨论】：

标签： javascript loops mustache continue ractivejs

【解决方案1】：

至少根据他们的文档，我不相信 Ractive 小胡子中有 break 或 continue 声明（或类似的声明）。你仍然可以达到同样的效果。

根据某些条件而不是continue，只需处理相反的条件。

{[#if !this.hidden]} {[do whatever...]} {[/if]}

不是break循环，而是在绑定之前过滤数组。

var listModified = [];
for (var i=0; i < ractive.get("list").length; i++) {
    if (/* some condition */)
        break;
    listModified.push(ractive.get("list")[i]);
}

【讨论】：

【解决方案2】：

您可以创建一个计算属性，该属性返回一个忽略隐藏的数组。假设列表是对象列表：

将此添加到您的配置中：

computed: {
  listWithoutHidden: function(){
    return this.get('list').filter(function(item){
      return !item.hidden;
    });
  }
}

并更新模板

<ul>
    {{#listWithoutHidden}}
    <li>{{this.value}}</li>
    {{/list}}
</ul>

【讨论】：

这个答案是正确的思维方式。您需要在将数据发送到胡须之前对数据进行逻辑处理。