JQuery 和反应式 Meteor 组件答案

【问题标题】：JQuery and Reactive Meteor ComponentsJQuery 和反应式 Meteor 组件
【发布时间】：2016-05-11 16:50:11
【问题描述】：

我正在使用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>

在第四步，当 jquery 步骤被渲染和创建时，集合中的所有人员都会显示出来。但是，如果我在第 4 步中添加人员，则在我刷新页面并重建 jquery 步骤之前，他们不会被添加。有没有办法让 jquery 步骤 html 反应？

【问题讨论】：

标签： javascript jquery html meteor meteor-blaze

【解决方案1】：

是的，在为 UI 组件使用其他 JS 库时，这是一种非常常见的模式。通常选择的解决方案是构建您的代码/模板，以便在添加新内容时会有另一个 onRendered 事件。在您的情况下，您可能会这样做：

  <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 );

【讨论】：

感谢您的帮助。当我插入一个新的Person 时，person.onRendered 不会被调用。
经过进一步调查，车把助手{{#each person}} 甚至没有被调用。就好像 jquery 步骤破坏了助手和反应数据 People 之间的连接。
当插入发生时，我还在集合上添加了一个观察，然后触发了render 函数。 render 函数被调用但会中断 jquery 步骤。

【解决方案2】：

什么最终为我工作：

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 步骤之后，我会注入反应式 Blaze 模板，而不是在 jquery 步骤执行其操作之前注入它。注意 onRendered 函数中的Blaze.render。

【讨论】：