Question

我正试图用流星1.0测试猫头鹰旋转木马。基本上我试图在listboard示例中将list转换为owl carousel。但是当我实施时它显示了旋转木马但有时没有显示旋转木马。我的意思是相同的代码不保证相同的结果如果它显示为carousel但是不会发生播放器元素上的click事件。如何使用排行榜示例在播放器元素上使用click事件正确显示轮播？

以下是我的做法：

我使用排行榜示例中的meteor创建了应用程序。

meteor create --example leaderboard

并添加了owl-carousel。

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

问题在于，当初始化代码运行时，您尝试放入旋转木马的div实际上已经被渲染。这是因为正在从服务器填充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();
    }
  }); 
};

请注意，您还需要编写一个发布函数，我还没有将其包括在内。另一种超级黑客的方法如下：

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（）{ $（＆＃34; .owl传送带＆＃34）。owlCarousel（{ 项目：5 }）; };

可能对绝对的初学者有用

带有猫头鹰旋转木马的流星排行榜示例

2 个答案: