I am currently working with a nested template and using a ReactiveDict to store the data. The data includes variables such as color, type, as well as an array of children nodes.
However, I have encountered an issue during refresh: although the array displays reactively, updating the array does not result in proper rendering.
To simplify the code:
<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);
}
})
The current behavior is that when elements are updated, existing elements do not get updated while newly added elements appear. Additionally, if elements are removed, they disappear but the data within variables (such as color) remains unchanged.
To address this issue, I have resorted to the following workaround:
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);
}
})
This workaround involves forcing the array to empty momentarily before refreshing it after a short timeout, which is not ideal.
Is there a more appropriate way to handle this issue? PS: I have tried utilizing allDeps.changed() on the ReactiveDict, as well as attempting to force re-rendering. However, these methods did not yield desired results. I suspect the problem lies in the lack of _id's in the objects. Despite trying to add them, success has been limited.