JQuery和反应流星组件 [英] JQuery and Reactive Meteor Components

问题描述

我使用 jquery步骤来呈现Blaze模板中的向导。

js：

  Template.form.onRendered（function（） {
变种形式= $（ ＃form1中）; 
 form.children（ DIV）步骤（{
 headerTag： H4，
 bodyTag：字段集。 ，
 transitionEffect：slideLeft
}）
}）
 
 Template.form.helpers（{
 person：function（）{
 return People.find（）; 
}，
}）
  

html：

 < template name =form> 
< form id =form1> 
< div> 
< h4> 1< / h4> 
< fieldset> 
< small>第一步< / small> 
< / fieldset> 
 
< h4> 2< / h4> 
< fieldset> 
< small>第二步< / small> 
< / fieldset> 
 
< h4> 3< / h4> 
< fieldset> 
< small>第三步< / small> 
< / fieldset> 
 
< h4> 4< / h4> 
< fieldset> 
 {{#each person}} 
 {{this.name}} 
 {{/ each}} 
< / fieldset> 
< / div> 
< / form> 
< / template> 
  

第四步，在jquery步骤呈现并创建时，集合中的所有人被显示。但是，如果我在第4步添加人员，他们不会被添加，直到我刷新页面和jquery步骤重建。有没有办法使jQuery的步骤HTML反应？

解决方案

结束了我的工作：
$ b js：

  Template.form.onRendered（function（）{
 var form = $（＃form1）; 
 form.children（ DIV）的步骤。（{
 headerTag： H4，
 bodyTag： 字段集，
 transitionEffect： slideLeft 
}）
 
 //新增
 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>第一步< / small> 
< / fieldset> 
 
< h4> 2< / h4> 
< fieldset> 
< small>第二步< / small> 
< / fieldset> 
 
< h4> 3< / h4> 
< fieldset> 
< small>第三步< / small> 
< / fieldset> 
 
< h4> 4< / h4> 
< fieldset> 
< div id =reactiveUI> 
 <！ - 插入反应性HERE  - > 
< / div> 
< / fieldset> 
< / div> 
< / form> 
  

 < template name =allPeople> 
< ul> 
 {{＃每个人}} 
< li> {{this.type}}< / li> 
 {{/ each}} 
< / ul> 
< / template> 
  

现在在jquery步骤建立之后，我注入了被动Blaze模板，而不是在jquery之前注入它步骤做它的事情。请注意onRendered函数中的 Blaze.render 。

I am using jquery steps in order to render a wizard within a Blaze template.

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>

On the 4th step all of the people that are in the collection when the jquery steps get rendered and created are shown. However if I add people while on the 4th step they do not get added until I refresh the page and the jquery step gets rebuilt. Is there someway to make the jquery step html reactive?

解决方案

What ended up working for me:

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>

Now after the jquery steps gets built I inject the reactive Blaze template, rather than injecting it before the jquery steps does its thing. Notice the Blaze.render in the onRendered function.

这篇关于JQuery和反应流星组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！