javascript - How Do I Make an Array of Objects a Reactive Data Source? -

i have array of objects. say

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

every object turned box on page using construct

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

the html:

        {{#each side}}             <div class="span{{this.index}}" id={{this.object.id}}>                       <div class="side-head">{{this.object.name}}</div>   </template> 

there function creates , pushes new object array. how make row of boxes reactively update on page when array depend on changes?

so when add new object new box should appear.

if want use dependencies, can this:

var sidelist = ...; var sidelist_dep = new deps.dependency; 

 

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

 

// important: call every time change sidelist, // after change made. sidelist_dep.changed(); 

 

see: http://docs.meteor.com/#deps