Реактивное добавление / удаление слайдов из ionSlideBox в Meteoric

Question

Мне нужна помощь в добавлении / удалении слайдов в ionSlideBox. Функциональность, к которой я стремлюсь, выглядит примерно так: пользователь может добавить один или несколько "продуктов". Каждая запись продукта представляет собой слайд. Как только все эти слайды (продукты) добавлены, данные наконец сохраняются. Итак, для начала, есть только 1 слайд в ionSlideBox. Пользователь нажимает кнопку "плюс" и добавляется еще один слайд.

{{#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": {} });
  }
})

Но дополнительные слайды НЕ добавляются в ionSlideBox. Представление просто показывает значение по умолчанию - "Продукт № 1", хотя все больше слайдов (продуктов) добавляются через события plusButton. Я знаю, что здесь что-то не так, но я не могу понять, что. Любая помощь / указатели будут очень признательны.

Кроме того, как можно использовать эквивалентные методы $ionicSlideBoxDelegate в Meteor? В частности, что является метеорным эквивалентом ионно-ангальских $ionicSlideBoxDelegate.update()?

Благодарю.

Answer 1

Meteoric использует Slick для создания ionSlideBox.

Чтобы добавить слайд реактивно, нужно использовать collection.observe для обработки изменения коллекции

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