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 在过滤器<中设置为 true / em> object。

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

<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>

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

1 个答案: