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