Question

在Ractive.js中，如何将属性附加到传递给组件的数组中的每个对象，而不将它们提供给父Ractive对象？

组件可能希望添加额外的属性以帮助它管理自己的内部状态。这是一个表示为制表符控件的示例组件。

组件JS

var tabComponent = Ractive.extend({
isolated: true,
template: '#tabTemplate',
data: function(){
    return {
        items: [] // contains objects in this format { text: "title", detail: "detail" }
    };
},
onrender: function() {
    // add the extra property the component needs to be able to work
    for(var i = 0; i < this.get('items').length; i++){
        this.set('items[' + i + '].selected', false);
    }

    this.on('toggle', function(event){
        var keypath = event.keypath + '.selected';

        this.set(keypath, !this.get(keypath));
    });
}

}）;

组件模板

<ul>
    {{#items}}
    <li>
        <header class="tabHeader" on-click="toggle">{{text}} - Click to toggle!</header>
        <div class={{selected ? '' : 'hidden'}}>{{detail}}</div>
    </li>
    {{/items}}
</ul>

然后，父Ractive对象可以在其模板中使用这样的组件。

<tab-control items="{{myItems}}"></tab-control>

父Ractive对象现在可以看到纯粹为组件内部工作添加的额外属性。如果父Ractive对象想要为ajax调用序列化数据，这将是令人讨厌的，因为它现在必须知道组件内的属性。反正是为了防止这些特定于组件的数据属性在其自身之外变得可用吗？

我添加了example here。将模型打印到控制台窗口时，您可以在阵列中的每个项目上看到“选定”属性。

Answer 1

对于这些更简单的用例，您可以使用另一个数组来跟踪选定的状态：

<ul>
    {{#items:i}}
    <li>
        <header class="tabHeader" on-click="toggle('selected.' + i)">{{text}} - Click to toggle!</header>
        <div class={{selected[i] ? '' : 'hidden'}}>{{detail}}</div>
    </li>
    {{/items}}
</ul>

只需确保将数据添加到您的组件：

var tabComponent = Ractive.extend({
    isolated: true,
    template: '#tabTemplate',
    data: function(){
        return {
            items: [],
            selected: []
        };
    }
});

请参阅example

否则，您可以为每个项目使用一个组件，然后获得该项目的相对数据容器：

{{#items}}
    <li>
        <tab item='{{this}}'/>
    </li>
{{/items}}

这使您可以更好地控制和执行计算属性等操作：

var tabComponent = Ractive.extend({
    template: '#tab',
    isolated: true,
    data: {
        selected: false
    },
    computed: {
        upperDetail: '${item.detail}.toUpperCase()'
    }

});

请参阅http://jsfiddle.net/th2fywny/6/。

将数组传递给Ractive js组件

1 个答案: