Blaze中DOM元素的注入行爲

我希望能夠通過CSS注入DOM元素的行爲。例如：如果某個元素具有類clickToAlert，則單擊該元素將顯示警報。Blaze中DOM元素的注入行爲

使用Spark，實現起來相當容易 - 我通過rendered模板DOM查看了回調並增強了所選元素。

Template.something.rendered = funciton() { 
    _.each(this.findAll('clickToAlert'), function(element) { 
     $(element).injectDesiredBehavior(); 
    }); 
};

然而，與Blaze這將不再可能，因爲rendered回調只會被調用一次。因此，稍後插入一些數據並添加新的.clickToAlert元素時，它不會得到該行爲。

什麼是最好的解決方案？

偏轉的解決方法：

是的，還有一個原因，我不只是使用Template.something.events。實際行爲比這要複雜得多 - 考慮可複用的UI組件以及它們的事件，樣式，也可以響應來自應用程序其他部分的事件（如Bootstrap's affix）。
我想真的喜歡避免把每個這樣的元素在其自己的模板中建議here。我有太多的方法，這會粉碎我的應用程序結構。

來源

2014-03-04 Hubert OG

如果需要舊的行爲是在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);

來源

2014-03-04 13:08:55

Blaze中DOM元素的注入行爲

回答

相關問題