Meteor Leaderboard пример с Owl-carousel

Question

Я пытаюсь проверить сова-карусель с метеором 1.0. В основном я пытался преобразовать список как карусель совы в пример лидеров. но когда я его реализовал, он показал карусель, но иногда не показывал карусель. Я имею в виду, что тот же код не гарантирует одинаковые результаты. , если он отображается как карусель, но событие click на элементе игрока не встречается. Как правильно показать карусель с событием клика на элементе плеера, используя пример таблицы лидеров?

Ниже приведены, как я сделал:

Я создал приложение, используя метеорит из таблиц лидеров, например.

meteor create --example leaderboard 

и добавлены сова-карусель.

mrt add owl-carousel 

Я попытался преобразовать список как сова-карусель. Я только что сменил тег OL на DIV и LI на DIV, как показано ниже.

<template name="leaderboard"> 
    <div class="leaderboard owl-carousel"> 
    {{#each players}} 
     {{> player}} 
    {{/each}} 
    </div> 

    {{#if selectedName}} 
    <div class="details"> 
     <div class="name">{{selectedName}}</div> 
     <button class="inc">Add 5 points</button> 
    </div> 
    {{else}} 
    <div class="message">Click a player to select</div> 
    {{/if}} 
</template> 

<template name="player"> 
    <div class="player {{selected}}"> 
    <span class="name">{{name}}</span> 
    <span class="score">{{score}}</span> 
    </div> 
</template> 

и добавлена ​​функция инициализации.

Template.leaderboard.rendered = function() { 
    console.log("rendered"); 
    var owl = this.$('.owl-carousel'); 
    owl.owlCarousel({ 
     items: 2 
    }); 
    }; 

Вот коды: https://github.com/sh1nj1/carousel-leaderboard/tree/owl-carousel

Answer 1

Проблема заключается в том, что дивы вы пытаетесь поместить в карусель на самом деле не были оказаны при выполнении кода инициализации. Это связано с тем, что коллекция Players заполняется с сервера, что займет долю секунды, поэтому первый рендер будет деактивирован, .owl-carousel div будет пустым, будет выполнен обратный вызов rendered, а div будет , а затем, обновив после того, как они будут получены (с этой точки уже слишком поздно добавлять их в карусель).

Чтобы исправить это, вам необходимо отложить инициализацию до тех пор, пока данные не будут готовы. правильно способ сделать это состоит в использовании Meteor.publish на сервере и Meteor.subscribe на клиенте, который будет возвращать ручку с реактивным ready метод, который вы можете использовать определить, когда коллекция готова:

playersSub = Meteor.subscribe('players'); 

Template.leaderboard.rendered = function() { 
    var _this = this; 
    this.autorun(function(c) { 
    if (playersSub.ready()) { 
     var owl = _this.$(".owl-carousel"); 
     owl.owlCarousel({ 
     items: 2 
     }); 
     c.stop(); 
    } 
    }); 
}; 

Примечание что вам также нужно будет написать функцию публикации, которую я здесь не включил. Альтернатива, супер-Hacky способ сделать это будет выглядеть следующим образом:

Template.leaderboard.rendered = function() { 
    var _this = this; 
    this.autorun(function(c) { 
    if (Players.find().count() > 0) { 
     var owl = _this.$(".owl-carousel"); 
     owl.owlCarousel({ 
     items: 2 
     }); 
     c.stop(); 
    } 
    }); 
}; 

Это не нужна функция публикации, но при этом предполагается, что все игроки будут приниматься в одном пакете, который не может быть в случае если бы у вас было много. Но это заставит его работать очень быстро.

И, наконец, какой пакет вы используете? owl-carousel не существует - это richsilv:owl-carousel?

Answer 2

Я был просто новым стартером для метеорита, поэтому ответ @richsilv помог мне начать со статического кода в соответствии с демонстрацией совой карусели.

Все, что мне нужно знать, это поставить код в визуализированную функцию. мое имя шаблона было mainhome, поэтому я написал код, подобный этому

Template.mainhome.rendered = function() { $ (". owl-carousel"). owlCarousel ({ шт.: 5 }); };

Возможно, это полезно для абсолютных новичков