Meteor.js onRendered未触发数据更改时的动态模板

Question

我正在尝试集成一个名为"页面事件"；关于"；page main"；这取决于来自帮助者的数据：

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() + ")");
});
});

JS EVENT(包括Jankapunkt的解决方案(

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", eventData._id, "rgb(" + rgb.r.toString() + "," + rgb.g.toString() + "," + rgb.b.toString() + ")");
});
});
});

每当助手检索的数据被修改时，我希望模板重新渲染，因为onRendered的一些功能(在本例中排除(依赖于新数据。但onRendered从不触发。我做错了什么？

编辑：使用Jankapunkt的解决方案后，一些onRendered组件会触发父模板的每个集合项，而不仅仅是传递给子模板的项。

Answer 1

您可以在autorun(Tracker(计算中使用Template.currentData()检查反应性数据更新：

Template["page-event"].onRendered(function() {
const instance = this
instance.autorun(() => {
const data = Template.currentData() // reactive data source
// ... process data
})
});

根据BlazeJS文档，它应该适用于onCreated和onRendered

Answer 2

我认为onRendered函数不是被动的，它不会重新评估数据更改。它专门用于只渲染一次。您想要的是一个常规的辅助函数，然后在模板中使用它。

Template["page-event"].helpers({
foo(): { console.log("RENDERING EVENT"); }
});

这将在数据更改时重新运行。