Question

我需要一些帮助来在ionSlideBox中反应性地添加/删除幻灯片。我试图获得的功能是这样的：用户可以添加一个或多个产品＆＃39;。每个产品条目都是幻灯片。添加所有这些幻灯片（产品）后，最终会保存数据。首先，在ionSlideBox中只有1张幻灯片。用户点击＆＃39;加＆＃39;按钮和另外一张幻灯片。

{{#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。视图只显示默认值 - ＆＃34;产品＃1＆＃34;，尽管通过plusButton事件添加了更多幻灯片（产品）。我知道这里有些不对劲，但我无法弄清楚是什么。任何帮助/指针都会非常感激。

另外，如何在Meteor中使用$ ionicSlideBoxDelegate等效方法？具体来说，Meteor相当于离子 - angualar的$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);
    }
  });
});

在Meteoric中从ionSlideBox反复添加/删除幻灯片

1 个答案: