将 HTML 对象添加到事件 javascript/meteor答案

【问题标题】：Add HTML object to an event javascript/meteor将 HTML 对象添加到事件 javascript/meteor
【发布时间】：2023-03-08 21:31:02
【问题描述】：

如何将 HTML 对象添加到事件中？
我想做这样的事情：

Template.Schedule.events({
    'dblclick .mycol' (event){
        event.target.childNodes.append("<strong>Test</strong>");
    }
});

我知道我可以为给定的示例设置样式并更改 innerHTML 等，但我实际上想添加其他 HTML 对象，例如选择标签，我该怎么做？

【问题讨论】：

这是完整的代码sn-p吗？看起来您在第一行代码中遗漏了一些内容。
我忘记了第一行的模板，但这纯粹是流星的语法/规则，但我添加了它

标签： javascript html meteor meteor-blaze

【解决方案1】：

原版JS方式

您可以在这里使用innerHTML 来更改被点击元素的html 内容：

'dblclick .mycol' (event){
  const target = event.currentTarget
  target.innerHTML = target.innerHTML + "<strong>Test</strong>"
}

如果你想在事件中操作父级，你可以使用outerHTML

jQuery 方式

您使用 append 的方法需要 jQuery：

'dblclick .mycol' (event){
  $(event.currentTarget).append($("<strong>Test</strong>"))
}

奖励：使用 jQuery 的优化

在流星火焰模板事件中，每个事件都有对模板实例的引用。这个模板实例保留了a reference to a jQuery object，它是它操作的 DOM 的一部分。

template.$ 返回那些相同元素的 jQuery 对象。 jQuery 对象类似于数组，具有由 jQuery 库。

模板实例用作选择器的文档根。只有模板内的元素及其子模板可以匹配选择器的一部分。

如果您的 seconds 事件参数是 namend templateInstance，您可以通过 templateInstance.$ 访问它。与

'dblclick .mycol' (event, templateInstance){
  templateInstance.$(event.currentTarget).append($("<strong>Test</strong>"))
}

这节省了 jQuery 遍历整个 DOM 的需要，使其在处理大型文档时更加高效。

流星火焰之路

现在，当需要进行小规模操作时，这些都是巧妙的小技巧。但是，您可能希望您的应用具有可扩展性，并始终从 Blaze 渲染引擎中获益。

在这种情况下，您可能希望生成一种动态插入模板的方法。

考虑以下模板，该模板尚未导入：

rowcontent.html

<template name="rowcontent">
    <strong>Test</strong>
    <p>someData{{someData}}</p>
</template>

rowcontent.js

import './rowcontent.html' // currently just the import

您可以在运行时使用Blaze.renderWithData 将其动态添加到元素中，因此：

'dblclick .mycol' (event, templateInstance) {
    import './rowcontent.js' // use the right path here
    Blaze.renderWithData(Template.rowcontent, {someData: 'toBePassedToRowContent'}, event.currentTarget)
 }

这将导致：

这是我的测试

someDatatoBePassedToRowContent

这种方法的优点是您可以将数据传递给模板并保留所有反应性优势，因此可以像处理 Meteor 中的任何其他模板一样处理新添加的模板。

替代方案

使用Template.dynamic的声明性动态模板

【讨论】：