问在riotjs中加载外部库
EN

Stack Overflow用户

提问于 2016-09-24 01:48:52

回答 1查看 549关注 0票数 1

我有jquery柔性滑块，它做幻灯片动画。但问题是，库在加载DOM之前正在加载，因此无法触发柔性滑块的操作。

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",
            });
        }
    }
})

但我该如何在闹剧中解决同样的问题呢？

防暴码：

<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

javascript

jquery

angularjs

riot.js

企业复产复工专享

为企业提供海量产品优惠，助力中小企业数字化转型升级

回答 1

Stack Overflow用户

回答已采纳

发布于 2016-09-24 01:53:40

您可以在防暴标签中调用您的柔性滑块插件，以便在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>