Ractive.js，通过命名属性访问父属性

Question

我有一个数据对象：

var data = {
    examples: [
    {
        type: 'a',
        message: 'a'
    },
    {
        type: 'b',
        message: 'b'
    },
    {
        type: 'c',
        message: 'c'
    }
    ],
    filter: {
        a: true,
        b: false,
        c: true
    }
};

我只想显示 examples 中的那些项目，其中 examples.type 在 filtertrue /em> 对象。

为了说明问题，让我为模板编写伪代码：

<ol>
    {{#each examples}}
        {{#if ../filter[type]}}
            <li>{{message}}</li>
        {{/if}}
    {{/each}}
</ol>

我需要访问父对象属性，我可以通过 ../ 来完成，并使用命名属性从 filter 对象中获取数据。

我该怎么做？我使用 RactiveJS。

Answer 1

您的伪代码 99% 正确。唯一的问题是，在{{#each ... }} 块内，您需要提升两个 级别的../../filter。

从单个数组项到数组的一个去：

root/examples/0 --> root/examples

还有一个从数组到数据根：

root/examples --> root

现在找到过滤器的上下文是正确的：

root/filter

但是，由于filter已经在ractive实例数据根目录，你可以直接使用~/filter语法直接访问：

<ol>
    {{#each examples}}
        {{#if ~/filter[type]}}
            <li>{{message}}</li>
        {{/if}}
    {{/each}}
</ol>

new Ractive({
  el: document.body,
  template: '#template',
  data: {
    examples: [
    {
        type: 'a',
        message: 'a'
    },
    {
        type: 'b',
        message: 'b'
    },
    {
        type: 'c',
        message: 'c'
    }
    ],
    filter: {
        a: true,
        b: false,
        c: true
    }
  }
});

<script src='http://cdn.ractivejs.org/edge/ractive.min.js'></script>
<script id='template' type='text/html'>
<ol>
    {{#each examples}}
        {{#if ~/filter[type]}}
            <li>{{message}}</li>
        {{/if}}
    {{/each}}
</ol>
</script>