问题描述
我正在尝试在“page-main”上集成一个名为“page-event”的动态模板,该模板依赖于来自助手的数据:
HTML 主文件
{{>Template.dynamic template="page-event" data=selectedEvent}}
JS 主线
Template["page-main"].helpers({
selectedEvent: function() {
var eventId = Template.instance().selectedEventId.get()
event = Collections.Events.findOne(eventId);
return { event: event };
}
});
JS 事件
Template["page-event"].onRendered(function() {
const ti = this;
var eventData = this.data.event;
console.log("RENDERING EVENT");
// Color picker
var colorPicker = $(ti.find(".colorSelect"));
colorPicker.colorpicker({ format: "hex" });
colorPicker.colorpicker("setValue",eventData.color);
colorPicker.colorpicker().on("hidePicker.colorpicker",function(event) {
var rgb = event.color.toRGB();
Meteor.call("setEventVsColor",eventData._id,"rgb(" + rgb.r.toString() + "," + rgb.g.toString() + "," + rgb.b.toString() + ")");
});
});
Template["page-event"].onRendered(function() {
const ti = this;
const data = Template.currentData()
var eventData = data.event;
ti.autorun( function() {
console.log("RENDERING EVENT");
// Color picker
var colorPicker = $(ti.find(".colorSelect"));
colorPicker.colorpicker({ format: "hex" });
colorPicker.colorpicker("setValue",eventData.color);
colorPicker.colorpicker().on("hidePicker.colorpicker",function(event) {
var rgb = event.color.toRGB();
Meteor.call("setEventVsColor"," + rgb.b.toString() + ")");
});
});
});
每当助手检索到的数据被修改时,我希望模板重新渲染,因为一些 onRendered 功能(在本示例中排除)依赖于新数据。但 onRendered 永远不会触发。我做错了什么?
编辑:在使用 Jankapunkt 的解决方案后,一些 onRendered 组件会针对父模板的每个集合项触发,而不仅仅是传递给子模板的项。
解决方法
您可以在 ConvertValues()
(跟踪器)计算中使用 GetRValues()
检查反应性数据更新:
Template.currentData()
根据the BlazeJS documentation,它应该适用于autorun
,以及Template["page-event"].onRendered(function() {
const instance = this
instance.autorun(() => {
const data = Template.currentData() // reactive data source
// ... process data
})
});
我相信 onRendered
函数不是响应式的,它不会重新评估数据更改。它专门用于仅渲染一次。您需要的是一个常规的辅助函数,然后在您的模板中使用它。
Template["page-event"].helpers({
foo(): { console.log("RENDERING EVENT"); }
});
这将在数据更改时重新运行。