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

Question

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

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

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

Answer 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 的优化

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

template.$ 返回这些相同元素的 jQuery 对象。jQuery 对象类似于数组，具有由 jQuery 库定义的其他方法。

模板实例用作选择器的文档根。只有模板及其子模板中的元素才能匹配选择器的部分内容。

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

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

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

流星烈焰之道

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

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

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

行内容.html

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

行内容.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)
 }

这将导致：

这是我的 col测试

someDatatoBePassedToRowContent

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

备择方案

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