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

Question

我正在尝试在“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 组件会触发父模板的每个集合项目，而不仅仅是传递给子模板的项目。

Answer 1

我相信 onRendered 函数不是反应性的，它不会在数据更改时重新评估。它专门用于只渲染一次。你想要的是一个常规的辅助函数，然后你可以在你的模板中使用它。

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

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

Answer 2

您可以在 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

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

Meteor.js onRendered not triggered for dynamic template on data change

meteor

meteor-blaze