I am working with a collection that contains style properties that I loop through and apply to the corresponding element:
// server side
Meteor.publish('elements', function(){
return Elements.find();
});
//client side
Meteor.subscribe("elements");
setupElements = function () {
var currentUserId = Meteor.userId();
var elements = Elements.find({user: currentUserId}).fetch();
elements.forEach(function(e){
var elementId = e._id;
eval("document.getElementById('" + elementId + "').removeAttribute(\"style\")");
var width = e.width;
for (var i in width) {
eval("document.getElementById('" + elementId + "').style.width"= \"" + width[i] + "\"");
}
});
}
Template.element.rendered = function() {
if(!this._rendered) {
this._rendered = true;
// loop through elements and apply width style to each
setupElements();
}
}
// template
<template name="element">
{{#each element}}
<div id="{{_id}}" class="element">{{text}}</div>
{{/each}}
<button id="change-style">Change style</button>
</template>
Despite rendering the template and applying the appropriate widths to each element, when I trigger an update like so:
'click #change-style': function() {
Meteor.call('updateElements'); // assuming the server-side method successfully updates all elements
setupElements(); // expected this to fetch new styles and re-apply them
},
The database gets updated on the server, but the changes are not reflected on the client-side template until I refresh the page or trigger the event again. It seems like the client-side does not automatically update when new data is received from the server. I am curious about the correct setup to make the style re-application reactive, or if there is a way to force the template to refresh.
Thank you in advance!