在 riotjs 中加载外部库

Question

我有 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>

在 angular 中，我已将其修复如下：

.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>

Answer 1

您可以在 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

在 riotjs 中加载外部库

loading external library in riotjs

javascript

jquery

angularjs

riot.js

riot