旋转木马在 ractive 模板中不起作用

Question

home/index.ract

<div class="row owl-carousel owl-theme row">
    {{#featured}}
    <div class="column small-12 medium-6 large-3 pan item">
    <a href="{{ link }}">
      <div class="griditem boxshadow">
          <div class="item-content">
            <h1 class="title">{{ title }}</h1>
            <p class="byline">By {{ subtitle }}</p>
          </div>
      </div>
    </a>
    </div>
    {{/featured}}
    </div>

layout/index.ract

<!doctype html>
  <head>
    <link rel="stylesheet" href="/owl.carousel/owl-carousel/owl.theme.css">
  </head>
  <body>
    <main>
      <cromly:content />
      /***ractive component**/
    </main>

    <script type="text/javascript" src="/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="/bootstrap.min.js"></script>

    <script type="text/javascript" src="/owl.carousel/owl-carousel/owl.carousel.js"></script>

    <script type="text/javascript">

      jQuery(document).ready(function($){
        var owl = $('#handpicks');
        owl.owlCarousel({
          itemsCustom : [
               [450, 1],
               [600, 2],
               [1024, 3],
               [1200, 4]
             ],
             navigation : true
        });

      </script>
    </body>
    </html>

所有 ractive 模板都在 NodeJs 上。 owl 轮播或 slickjs 无法正常工作。每张幻灯片不显示 4 个项目。相反，它显示列表中的全部项目（非工作轮播）或项目消失 - 显示空白。 jquery ractive 模板中的插件根本就不能使用吗？

已更新

根据@martypdx

我试过：

 var main = Ractive.extend({
  el: 'main'
})
app = new main()

app.on({
    'onrender': function(){
        var owl = $('#handpicks');
        owl.owlCarousel({
              itemsCustom : [
                   [450, 1],
                   [600, 2],
                   [1024, 3],
                   [1200, 4]
                 ],
                 navigation : true
        });

    }
})

它仍然没有显示轮播幻灯片 - 换句话说，它是空白的

Answer 1

尝试将您的 jquery 代码移动到 ractive onrender 中：

编辑：作为活性函数

var main = Ractive.extend({
  el: 'main',
  onrender: function(){
    var owl = $('#handpicks');
    owl.owlCarousel({
       itemsCustom : [
               [450, 1],
               [600, 2],
               [1024, 3],
               [1200, 4]
       ],
       navigation : true
    });
  }
};

如果要使用on方法，请使用名称：

app.on( 'render', function(){
    var owl = //etc...
});

旋转木马在 ractive 模板中不起作用

Carousel not working in ractive template

jquery

ractivejs