meteoric / meteor-ionic

Ionic components for Meteor. No Angular!
http://meteoric.github.io
MIT License
1.51k stars 219 forks source link

ionSlideBox problem #127

Closed olddevyg closed 9 years ago

olddevyg commented 9 years ago

I'm experiencing an issue using ionSlideBox : it works only if I load my app on the page using the template. If I go to an other page and come back, the slides are gone. If I load from an other page and go to the slides page, the slides doesn't seems to initialize properly (despite the slick classes added to the div). What can I do wrong ? Or maybe an issue with Slick ?

Code used is simple :

    {{#ionView}}
        {{#ionContent}}
            {{#ionSlideBox}}
                {{#each <collection>}}
                    {{#ionSlide}}
                        <elements>
                    {{/ionSlide}}
                {{/each}}
            {{/ionSlideBox}}
        {{/ionContent}}
    {{/ionView}}
olddevyg commented 9 years ago

Nevermind, I just found where I was wrong in my waitOn subscriptions which lead to this weird issue. Everything works well :).

krishnaff commented 9 years ago

Hello,

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. 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 how/where can we use the previous(), next(), stop() etc in Meteor? Thanks.

krishnaff commented 9 years ago

OK. after further reading into ionic-angular docs, looks like this is the answer whenever the scope changes - $ionicSlideBoxDelegate.update()

What is the Meteor equivalent of $ionicSlideBoxDelegate.update() ? Thank you.

flake commented 9 years ago

@insaneinc01

Have you figured out Meteor equivalent of $ionicSlideBoxDelegate.update() or .next()???

I am trying to change slide on click event but no luck yet!

flake commented 9 years ago

@insaneinc01

I found a solution for change slide event with "slick"

$('.ion-slide-box').slick('slickGoTo', index); // index of the slide to show :)