我希望能够通过CSS为DOM元素注入行为。示例：如果一个元素具有类clickToAlert，则单击它会显示一个警报。
使用Spark，这很容易实现——我查看了rendered回调中的模板DOM，并增强了所选的元素。
Template.something.rendered = funciton() {
_.each(this.findAll('clickToAlert'), function(element) {
$(element).injectDesiredBehavior();
});
};
然而，对于Blaze，这将不再可能，因为rendered回调将只调用一次。因此，当稍后插入一些数据并添加新的.clickToAlert元素时，它不会得到行为。
什么是最好的解决方案？
；
转移变通办法：
- 是的，我不只是使用
Template.something.events是有原因的。实际行为比这复杂得多——想想可重用的UI组件及其事件、样式，它们也可以响应应用程序其他部分的事件(如Bootstrap的词缀) - 我真的很想避免像这里建议的那样把每个这样的元素都放在自己的模板中。我有太多了，这会破坏我的应用程序结构
如果您需要旧的行为，可以在https://github.com/avital/meteor-ui-new-rendered-callback有两种不同的解决方案，哪种最适合你
旧行为：
html:
<body>
{{> list}}
</body>
<template name="list">
{{#each items}}
{{name}}
{{/each}}
</template>
javascript：
Items = new Meteor.Collection("items", {connection: null});
Template.list.items = function () {
return Items.find();
};
var renderCount = 1;
var logRender = function () {
console.log("rendered #" + renderCount);
renderCount++;
};
Template.list.rendered = function () {
logRender();
};
setInterval(function () {
Items.insert({name: Random.choice(["one", "two", "three"])});
}, 1000);
解决方案1:
html:
<body>
{{> list}}
</body>
<template name="list">
{{#each items}}
{{name}}
{{/each}}
</template>
javascript：
Items = new Meteor.Collection("items", {connection: null});
Template.list.items = function () {
return Items.find();
};
var renderCount = 1;
var logRender = function () {
console.log("rendered #" + renderCount);
renderCount++;
};
Template.list.rendered = function () {
logRender();
};
Template.list.name = function () {
logRender();
return this.name;
};
setInterval(function () {
Items.insert({name: Random.choice(["one", "two", "three"])});
}, 1000);
解决方案2:
html:
<body>
{{> list}}
</body>
<template name="list">
{{#each items}}
{{> justName}}
{{/each}}
</template>
<template name="justName">
{{name}}
</template>
javascript：
Items = new Meteor.Collection("items", {connection: null});
Template.list.items = function () {
return Items.find();
};
var renderCount = 1;
var logRender = function () {
console.log("rendered #" + renderCount);
renderCount++;
};
Template.list.rendered = function () {
logRender();
};
Template.justName.rendered = function () {
logRender();
};
setInterval(function () {
Items.insert({name: Random.choice(["one", "two", "three"])});
}, 1000);