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

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

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

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

如果您的秒事件参数名为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

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

替代项

使用Template.dynamic

的声明式动态模板

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

1 个答案:

香草JS方式

jQuery方式

奖金：使用jQuery的优化

流星火焰之路

替代项