mercredi 25 novembre 2015

Is there a way to wait/delay rendering until for #Each-Helper is done with provided model?

Background: In my application I want a list of tags that's being displayed on every page of the website. Therefore I added a component to my application.hbs and gave the model, which I received in my application-route (from Firebase), into it:

application.hbs:

{{#tag-list-slider model=model}}{{/tag-list-slider}}

application.js (Route):

model() {
    return this.store.findAll('tag')
}

Problem: In my component I want to display the given model with the bxSlider. This works fine as long as I have static content like this:

conponent.hbs:

  <ul class="tag-slider">
      <li class="listItem">foo</li>
      <li class="listItem">foo</li>
      <li class="listItem">foo</li>
      <li class="listItem">foo</li>
  </ul>

The slider works great for this, even with images. Now my problem comes up as soon as I want to fill that list with the content of the model I put into the component:

  <ul class="tag-slider">
      {{#each model as |tag|}}
        <li class="listItem">foo</li>
      {{/each}}    
  </ul>

...and the slider just won't work. I put the "logic" for the slider in my component.js and there I used the didInsertElement()-hook:

Ember.run.scheduleOnce('afterRender', function() {
  $('.tag-slider').bxSlider({
    slideWidth: 200,
    maxSlides: 2,
    slideMargin: 50
  });
});

As you can see I even tried to use 'afterRender', but that doesn't do anything for me.

(I think) I nailed the problem down to the slider not having all the list-items when the page gets rendered. For that I combined the two cases from above and filled the list with both dynamic content from the #each-helper and the static html-content. In my didInsertElement() I wrote the count of all the list-items to the console:

  var listLengh = $('.listItem').length;
  console.log(listLengh);
  // try again, just for safety:
  Ember.run.scheduleOnce('afterRender', function() {
    var listLengh = $('.listItem').length;
    console.log(listLengh);
  });

and for both console.logs the output is "4" although it should be 8 (4 static + 4 dynamic list-items) because I think the count happens before the #each-helper adds the dynamic content to the page. (Which is strange because I thought thats the didInsertElement-hook was for).

So I'm looking for ways to delay the whole bxslider-process untill my #each-helper is done with loading the model-data to the template but I couldnt really find anything thus far.

Any Ideas? Thanks in advance!




Aucun commentaire:

Enregistrer un commentaire