Reactively adding/removing slides from ionSlideBox in Meteoric

Question

I need some help in reactively adding/removing slides in ionSlideBox. The functionality I'm trying to get at is something like this: User can add one or more 'products'. Each product-entry is a slide. Once all these slides(products) are added, the data is finally saved. So to start with, there's only 1 slide in ionSlideBox. User clicks 'plus' button and one more slide is added.

{{#ionView}}
    {{#ionContent}}
      {{#ionSlideBox}}
          {{#each dynamicSlides}}
            {{#ionSlide}}
               <h4>Product #{{count}}</h4>
               {{! form to accept productInfo }}
            {{/ionSlide}}
          {{/each}}
      {{/ionSlideBox}}
    {{/ionContent}}
  {{/ionView}}  

Session.setDefault('slideCounter', 1);

Template.addProductList.helpers({
  dynamicSlides: function() {
    var counter = Session.get('slideCounter');
    TempData.insert({"count": counter, "productInfo": {} });
    return TempData.find();
  }
});

Template.plusButton.events({
  'click button#add-one-more': function() {
    Session.set('slideCounter', Session.get('slideCounter') + 1);
    TempData.insert({"count": Session.get('slideCounter'), "productInfo": {} });
  }
})

But the extra slides are NOT added reactively to ionSlideBox. The view simply shows the default - "Product #1", although more slides (products) are getting added through the plusButton events. I know something's wrong here, but I'm unable to figure it out what. Any help/pointers would be really appreciated.

Also, how does one use the $ionicSlideBoxDelegate equivalent methods in Meteor? Specifically what is the Meteor equivalent of ionic-angualar's $ionicSlideBoxDelegate.update()?

Thanks.

Answer 1

Meteoric is using Slick to do the ionSlideBox.

To add slide reactively , need use collection.observe to handle the collection change

Template.yourTemplateName.onCreated(function() {
  yourCollection.find().observe({
    added: function (document) {
      var $slideBox = $('.ion-slide-box');
      var html = "your html here";
      $slideBox.slick('slickAdd',html);
    }
  });
});