Meteor.js 数据更改时动态模板未触发 onRendered
Meteor.js onRendered not triggered for dynamic template on data change
我正在尝试在“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() + ")");
});
});
JS 事件(包括 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 组件会触发父模板的每个集合项目,而不仅仅是传递给子模板的项目。
我相信 onRendered
函数不是反应性的,它不会在数据更改时重新评估。它专门用于只渲染一次。你想要的是一个常规的辅助函数,然后你可以在你的模板中使用它。
Template["page-event"].helpers({
foo(): { console.log("RENDERING EVENT"); }
});
这将在数据更改时重新运行。
您可以在 autorun
(Tracker) 计算中使用 Template.currentData()
检查反应性数据更新:
Template["page-event"].onRendered(function() {
const instance = this
instance.autorun(() => {
const data = Template.currentData() // reactive data source
// ... process data
})
});
根据 the BlazeJS documentation 它应该适用于 onCreated
,以及 onRendered
我正在尝试在“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() + ")");
});
});
JS 事件(包括 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 组件会触发父模板的每个集合项目,而不仅仅是传递给子模板的项目。
我相信 onRendered
函数不是反应性的,它不会在数据更改时重新评估。它专门用于只渲染一次。你想要的是一个常规的辅助函数,然后你可以在你的模板中使用它。
Template["page-event"].helpers({
foo(): { console.log("RENDERING EVENT"); }
});
这将在数据更改时重新运行。
您可以在 autorun
(Tracker) 计算中使用 Template.currentData()
检查反应性数据更新:
Template["page-event"].onRendered(function() {
const instance = this
instance.autorun(() => {
const data = Template.currentData() // reactive data source
// ... process data
})
});
根据 the BlazeJS documentation 它应该适用于 onCreated
,以及 onRendered