在riotjs中加載外部庫

我有jQuery的flexslider，它沒有幻燈片動畫。但問題是在加載DOM之前庫正在加載，因此無法觸發flexslider的操作。在riotjs中加載外部庫

HTML：

<html> 
    <body> 
     <home-template></home-template> 
     <script src="./views/home-template.html" type=riot/tag></script> 
     <script src="bower_components/riot/riot+compiler.min.js" type="text/javascript"></script> 
     <script src="assets/js/vendor/jquery-1.11.2.min.js"></script> 
     <script src="assets/js/jquery.flexslider-min.js"></script> 

     <script> 
      riot.mount('*'); 

      /***************** Flex Slider ******************/ 

      $('#courses-slider').flexslider({ 
       animation: "slide", 
       prevText: "", 
       nextText: "", 
       itemWidth: 292, 
       itemMargin: 0, 
       move: 1 
      }); // Courses Slider 
     </script> 
    </body> 
</html>

在角度，我有固定它象下面這樣：

.directive('flexslider', function() { 
    return { 
     link: function (scope, element, attrs) { 
      element.flexslider({ 
       animation: "slide", 
      }); 
     } 
    } 
})

但我怎麼修復riotjs一樣嗎？

防暴代碼：

<header-template></header-template> 
<home-template></home-template> 
<footer-template></footer-template> 

<script> 
     var SharedMixin = { 
      observable: riot.observable() 
     }; 
     //creating a data mixin so all tags can access data 

     var self = this; 
     var DataMixin = { 
      data: { 
       "status": "Init" 
      }, 
      state: "home", 
     } 
     function goTo(path) { 
      if (path === 'home') { 
       console.log(path); 
       riot.mount('home-template', {class: 'loader'}); 
       DataMixin.state = "home"; 
       riot.update(); 

      } else if (path === 'about') { 
       riot.mount('home-template'); 
       DataMixin.state = "about"; 
       riot.update(); 

      } else if (path === 'instructors') { 
       riot.mount('instructors-template'); 
       DataMixin.state = "instructors"; 
       riot.update(); 

      } else if (path === 'contact') { 
       riot.mount('contact-template'); 
       DataMixin.state = "contact"; 
       riot.update(); 
      } else { 
       console.log("error"); 
      } 
     } 

     riot.compile(function() { 
      // here tags are compiled and riot.mount works synchronously 
      //var tags = riot.mount('*') 
      //riot.route.exec(goTo); 
      header = riot.mount("header-template"); 
      footer = riot.mount("footer-template"); 
      riot.route(goTo); 
      riot.route.start(true); 
     }); 

     riot.mixin(DataMixin); 
    </script>

來源

2016-09-24 Satyadev

，你可以叫你flexslider插件的防暴標籤內，因此它被稱爲上掛接時，DOM是可供選擇：

<example-tag> 
    <p id="courses-slider">Est-ce que j'existe ?</p> 

    <script> 
    this.on('mount', function(){ 

     $('#courses-slider').flexslider({ 
      animation: "slide", 
      prevText: "", 
      nextText: "", 
      itemWidth: 292, 
      itemMargin: 0, 
      move: 1 
     }); // Courses Slider 

    }); 
    </script> 
</example-tag>

看到http://riotjs.com/fr/guide/#montage

來源

2016-09-24 09:53:40 Gatsbill

我有已經試過'mount'和'updated'哪個沒有工作 – Satyadev

這是甚至可以使用setTimeout嗎？真的很奇怪它沒有工作後掛載 – Gatsbill

超時被調用，但問題仍然沒有解決 – Satyadev

在riotjs中加載外部庫

回答

相關問題