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