Meteor.js onRendered 不会为数据更改的动态模板触发答案

【问题标题】：Meteor.js onRendered not triggered for dynamic template on data changeMeteor.js onRendered 不会为数据更改的动态模板触发
【发布时间】：2021-04-15 12:25:52
【问题描述】：

我正在尝试在“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", eventData._id, "rgb(" + rgb.r.toString() + "," + rgb.g.toString() + "," + rgb.b.toString() + ")");
            });
        });
    });

每当修改助手检索的数据时，我希望模板重新渲染，因为某些 onRendered 功能（在此示例中不包括）依赖于新数据。但 onRendered 永远不会触发。我做错了什么？

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

【问题讨论】：

能否请您添加应该触发的 onRendered 函数？
无论 onRendered 内容如何，它都不会重新渲染。例如，我可以简单地放入一个 console.log("RENDERING EVENT");它最初只会打印一次，然后再也不会打印。

标签： meteor meteor-blaze

【解决方案1】：

您可以在 autorun（跟踪器）计算中使用 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

【讨论】：

好吧，这行得通，但 onRendered 的内容似乎还是起了作用。我修改了示例以举例说明我正在使用的颜色选择器。现在，这会触发我之前渲染的父模板的每个项目，而不仅仅是子模板上选定的事件项目。
项目是指我的“事件”集合的已发布文档，其中我只将一个传递给子模板。至少这是意图......
这可能是因为在更改传递给子级的数据时，旧的子级模板在重新渲染后仍然在 DOM 中的某个位置？在子模板之间切换时不会触发 OnDestroyed。我设法在 onRendered 中更改了一些侦听器，并以“流星”的方式进行了更改，但是对于某些插件，我在这样做时遇到了困难....
嘿，伙计们，我在为我的图表呈现新数据时面临同样的问题。即使它是反应性的。数据更改时我的自动运行不会更新
@VinayKashyap 请打开一个新问题并添加您认为应该触发自动运行的代码。

【解决方案2】：

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

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

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

【讨论】：

恐怕我不确定这将如何工作。我的 onRendered 确实很长，包括颜色选择器和文本编辑器等。我已经修改了示例以反映其中的一部分。我如何将所有这些与助手集成？