流星 - 對DOM運行代碼渲染\重新渲染

HTML流星 - 對DOM運行代碼渲染重新渲染

<template name='sometpl'> 
    <select> 
    <option>day</option> 
    <option>night</option> 
    </select> 
    {{#if day}} 
    <div class='ui popup' data-popup='I'm awake!'>day</div> 
    {{#if night}} 
    <div class='ui popup' data-popup='I'm asleep'>night</div> 
</template>

咖啡

Template.sometpl.helpers 
    day:-> if $('select').val()=='day' then true 
    night:-> if $('select').val()=='night' then true 

Template.sometpl.onRendered -> 
     $('.ui.popup').popup()

此代碼$('.ui.popup').popup()將初始化的各元素（語義UI）彈出窗口。問題是，它的跑只有在tpl渲染一次，因此隻影響這個節點：<div class='ui popup' data-popup='I'm awake!'>day</div>。
當我選擇night此代碼$('.ui.popup').popup()不運行離開新呈現的節點<div class='ui popup' data-popup='I'm asleep'>night</div>沒有彈出。
此外，當我再次選擇day時 - 這次沒有彈出！因爲它引用了全新的'日'div的渲染，而不是舊的。
這裏可以做些什麼？

來源

2015-05-27 avalanche1

試着做一個組件出你的白天和黑夜的div：

它的JavaScript：

Template.popup.onRendered(function() { 
    this.$('.ui.popup').popup() 
});

然後，你可以這樣做：

{{#if day}} 
    {{>popup text="I'm awake" day="day"}} 
{{/if}} 

{{#if night}} 
    {{>popup text="I'm asleep" day="night"}} 
{{/if}}

來源

2015-05-27 11:26:46 Akshat

謝謝。但是，這可以通過包括另一個模板來完成嗎？也許我過分簡化了我的例子，但是我實際上有數百個這樣的'select's，如你所想象的那樣，爲它們保留數百個相應的tpls將是一件痛苦的事情。 – avalanche1

假設彈出窗口都遵循相似的格式，您只需要一個額外的模板，如上所示。只要將'text'和'day'改爲'popupText'和'text'，如果這樣做更清楚，然後用這些變量調用模板就可以隨時彈出... –

@ avalanche1另一種方法是使用' this.autorun（function（）{$（「。popup」）。popup（）}）;'在'onRendered'塊中。你也必須添加一些被動的東西。用你的助手直接查詢select字段，但是如果你使用反應性的東西（並且你應該這樣做）並且在'autorun'塊中查詢這個無效變量，它應該在你改變選擇字段時更新。 – Akshat

原來我需要使用Tracker.afterFlush和Tracker.autorun。
完成solution。
感謝各位here。

來源

2015-05-28 06:34:13 avalanche1

流星 - 對DOM運行代碼渲染\重新渲染

回答

相關問題