Загрузка внешней библиотеки в 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 плагин внутри бунта тега, так что это называется на горе, когда дом доступен:

<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

ответ

Смежные вопросы