Jquery And Reactive Meteor Components

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(

Solution 1:

Yes, this is a very common pattern when working with additional JS libraries for UI components. The typically chosen solution is to structure your code/template such that there will be another onRendered event when new things get added. In your case you might do:

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

...

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

And have the same onRendered function for that template:

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

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

Solution 2:

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 Additionvar temp = this;
    Blaze.render(
        Template.allPeople,
        temp.$('#reactiveUI').get(0)
    );
})

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

html:

<templatename="form"><formid="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><divid="reactiveUI"><!--Insert Reactive HERE--></div></fieldset></div></form>

<templatename="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.