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>

布局/ 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模板都在NodeJ上。不知何故，猫头鹰轮播或slickjs无法正常工作。它没有显示每张幻灯片4个项目。相反，它显示列表中的所有项目（非工作轮播）或项目消失 - 显示为空白。是不是可以在ractive模板中使用jquery插件？

更新

根据@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：

编辑：放置ractive功能

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模板中工作

1 个答案: