在riotjs中加载外部库
在riotjs中加载外部库
提问于 2016-09-24 09:48:52
我有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>回答 1
Stack Overflow用户
回答已采纳
发布于 2016-09-24 09: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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/39674961
复制相关文章
相似问题
腾讯云开发者
