在riotjs中加载外部库

基图

我有做幻灯片动画的jQuery flexslider。但是问题在于,库是在加载DOM之前加载的,因此无法触发flexslider的动作。

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>
盖茨比尔

您可以在riot标签内调用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

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章