2016-02-18 31 views
1

我有一个嵌套模板,使用ReactiveDict存储数据,这是一个包含变量(颜色,类型...)和一个子节点数组的对象。更新流星,无功阵列渲染问题

我在刷新时遇到问题:数组显示为反应性,但是当我更新数组时,它无法正确呈现。

在短期(清理代码):

<body> 
{{#with data}} 
    {{>nested}} 
{{/with}} 
</body> 

<template name="nested"> 
<div>{{color}}<div> 
<div class="ui dropdown"> 
<!-- drop down stuff goes here--> 
</div> 
{{#if children}} 
{{#each children}} 
    {{>nested scope=this}} 
{{/each}} 
{{/if}} 
</template> 

Template.body.helpers({ 
"data": { color: "blue", 
children: [{color: "green", children: [{color: "teal"}]}, 
{color:"red", children:[{color: "cyan"}],{color: "magenta"}]]}} 
}) 

Template.nested.onCreated(function(){ 
     this.scope   = new ReactiveDict(); 
     this.scope.set('scope', this.data.scope); 
}) 
Template.nested.helpers({ 
"color": function() { Template.instance().scope.get('scope').color;}, 
"children": function() { 
     return Template.instance().scope.get('scope').children; 
    } 
}) 

Template.nested.events({ 
"click .ui.dropdown > .menu > .item": function(e, t) { 
    e.preventDefault(); 
    e.stopPropagation(); 
    var data = t.scope.get('scope'); 
    //do processing stuff here... 
    updatedArray = myFunction(); 
    data['children'] = updatedArray; 
    t.scope.set('scope', data); 
} 
}) 

所以发生了什么事是,在更新的元素alreayd目前没有更新,如果有元素的加入,他们露面。 如果删除了元素,它们的元素将被删除,但变量中的数据(此处为颜色)不会被更新。

为了使它工作至今,我必须做到以下几点:

Template.nested.events({ 
    "click .ui.dropdown > .menu > .item": function(e, t) { 
     e.preventDefault(); 
     e.stopPropagation(); 
     var data = t.scope.get('scope'); 
     //do processing stuff here... 
     updatedArray = myFunction(); 
     delete data.children; 
     t.scope.set('scope', data); 

     Meteor.setTimeout(function() { 
      data['children'] = updatedArray; 
      t.scope.set('scope', data); 
     },10); 
    } 
    }) 

这一工程,但它是一个总的黑客迫使阵列没有再短的超时后刷新。

我该如何正确地做到这一点? PS:我尝试在ReactiveDict上使用allDeps.changed(),我尝试强制重新渲染,但它在渲染循环中,所以它不会渲染视图两次。 似乎无法理解数组元素未更新的原因。我知道什么时候使用集合MiniMongo检查对象的_id是否被更改,但我的对象中没有_id。我也试图添加一个,但没有太多的运气

回答

0

以及我想我刚刚才问出来...... '_id'的事情伎俩。我曾尝试过,但我实际上使用相同的_id为相同的元素,所以他们似乎并没有改变(杜!)

因此,通过在我生成的对象中添加{ "_id": Meteor.uuid() }更新正常工作。