JQuery 和 Reactive Meteor 组件

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

是的，在为 UI 组件使用其他 JS 库时，这是一种非常常见的模式。通常选择的解决方案是构建您的 code/template，以便在添加新内容时会有另一个 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 );

Answer 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。

JQuery 和 Reactive Meteor 组件

JQuery and Reactive Meteor Components

html

javascript

jquery

meteor

meteor-blaze