Meteor.js 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 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"," + 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"); }
});

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