javascript - 如何使对象数组成为响应式数据源？

Question

我有一个对象数组。说

var 
sidelist = [
    {
    name:"asdf", 
    id:1234,
    types:[...]


    }
];

使用此构造将每个对象变成页面上的一个框

Template.global.side = function(){
    var obj = [], m;
    m = 1;
    for (var i in sides){
        obj.push({
            index : m,
            object : sides[i]
        });
    }

    return obj;
}

的HTML：

        {{#each side}}
            <div class="span{{this.index}}" id={{this.object.id}}>


                    <div class="side-head">{{this.object.name}}</div> 

</template>

有一个函数可以创建一个新对象并将其推送到数组中。当它们依赖的数组发生更改时，如何使该行框在页面上响应更新？

所以当我添加一个新对象时，应该会出现一个新框。

Answer 1

如果你想使用依赖，它看起来像这样：

var sidelist = ...;
var sidelist_dep = new Deps.Dependency;

 

Template.global.side = function(){
    sidelist_dep.depend();
    // Do your stuff here;
    return ...;
};

 

// Important: call this every time you change sidelist,
// AFTER the change is made.
sidelist_dep.changed();

 

请参阅：http ://docs.meteor.com/#deps

Answer 2

在几乎所有情况下，您都应该将对象放在 MeteorCollection中，而不是作为反应对象一部分的数组中。造成这种情况的原因有很多，包括以下几点

• 添加、删除、搜索和更新都将更快
• 反应性将在元素级别而不是数组上
• 当添加或删除某些内容时，Meteor 不会重新渲染整个对象集 - 只是更改
• 您可以在集合上定义排序顺序，使其比固定顺序更灵活

Answer 3

看看 Andrew Wilcox 的isolate-value 智能包： https ://atmosphere.meteor.com/package/isolate-value

自述文件包含当从存储在 Session 变量中的数组中添加/删除值时选择性地重新呈现相关模板的确切示例。