JQuery和反應流星組件

Question

我使用jquery steps爲了在Blaze模板中呈現嚮導。

JS：

Template.form.onRendered(function() { 
    var form = $("#form1"); 
    form.children("div").steps({ 
     headerTag: "h4", 
     bodyTag: "fieldset", 
     transitionEffect: "slideLeft" 
    }) 
}) 

Template.form.helpers({ 
    person : function() { 
     return People.find(); 
    }, 
}) 

HTML：

<template name="form"> 
    <form id="form1"> 
    <div> 
     <h4>1</h4> 
     <fieldset> 
      <small>First Step</small> 
     </fieldset> 

     <h4>2</h4> 
     <fieldset> 
      <small>Second Step</small> 
     </fieldset> 

     <h4>3</h4> 
     <fieldset> 
      <small>Third Step</small> 
     </fieldset> 

     <h4>4</h4> 
     <fieldset> 
      {{#each person}} 
       {{this.name}}  
      {{/each}} 
     </fieldset> 
    </div> 
    </form> 
</template> 

在第4步所有的都在收​​集時，jQuery的步驟操作，渲染和創建顯示的人。但是，如果我在第4步添加人員，他們不會被添加，直到我刷新頁面和jquery步驟重建。有沒有辦法使jQuery的步驟HTML反應？

Answer 1

什麼最終爲我工作：

JS：

Template.form.onRendered(function() { 
    var form = $("#form1"); 
    form.children("div").steps({ 
     headerTag: "h4", 
     bodyTag: "fieldset", 
     transitionEffect: "slideLeft" 
    }) 

    // New Addition 
    var temp = this; 
    Blaze.render(
     Template.allPeople, 
     temp.$('#reactiveUI').get(0) 
    ); 
}) 

Template.allPeople.helpers({ 
    person : function() { 
     return People.find(); 
    }, 
}) 

html：

<template name="form"> 
    <form id="form1"> 
    <div> 
    <h4>1</h4> 
    <fieldset> 
     <small>First Step</small> 
    </fieldset> 

    <h4>2</h4> 
    <fieldset> 
     <small>Second Step</small> 
    </fieldset> 

    <h4>3</h4> 
    <fieldset> 
     <small>Third Step</small> 
    </fieldset> 

    <h4>4</h4> 
    <fieldset> 
     <div id="reactiveUI"> 
      <!--Insert Reactive HERE--> 
     </div> 
    </fieldset> 
    </div> 
</form> 

<template name="allPeople"> 
    <ul> 
     {{#each person}} 
     <li>{{this.type}}</li> 
     {{/each}} 
    </ul> 
</template> 

現在jQuery的步驟被建成後，我注入反應大火模板，而不是jQuery的步驟之前注入它的事情。請注意onRendered函數中的Blaze.render。

Answer 2

是的，這是使用額外的用於UI組件的JS庫時非常常見的模式。通常選擇的解決方案是構建您的代碼/模板，以便在添加新事物時將會有另一個事件。在你的情況，你可能會做：

<h4>4</h4> 
    <fieldset> 
    {{#each person}} 
    {{> person}} 
    {{/each}} 
    </fieldset> 

... 

<template name="person"> 
    {{name}} 
</template> 

並有該模板相同onRendered功能：

function render() { 
    var form = $("#form1"); 
    form.children("div").steps({ 
     headerTag: "h4", 
     bodyTag: "fieldset", 
     transitionEffect: "slideLeft" 
    }) 
} 

Template.form.onRendered(render); 
Template.person.onRendered(render);