与Ractive集成jQuery插件的好方法是使用装饰器。 装饰器是一个函数,当元素进入DOM时调用它返回一个带有teardown()
方法的对象,该方法在从DOM中删除元素时调用。
因此,如果您正在使用jQuery文件上传插件,则您的装饰器可能如下所示:
var fileupload = function (node) {
$(node).fileupload();
return {
teardown: function () {
$(node).fileupload('destroy');
}
};
};
一旦你创建了装饰器,你需要注册它。最简单的方法是使其全局可用...
Ractive.decorators.fileupload = fileupload
...但您还可以传递每个实例或每个组件的装饰器:
ractive = new Ractive({
decorators: { fileupload: fileupload }
});
Widget = Ractive.extend({
decorators: { fileupload: fileupload }
});
然后,您可以在模板中像这样使用它:
<input decorator="fileupload" type="file" data-url="whatever">
有了这个插件,你可以使用data-
属性指定选项。但是如果您需要通过修饰器本身指定选项,也可以这样做:
<input decorator="fileupload:{{url}},{multiple:true}" type="file">
在这个例子中,装饰器函数会接收两个额外的参数 - 一个URL和一个选项对象:
Ractive.decorators.fileupload = function (node, url, options) {
return {
update: function (url, options) {
},
teardown: function () {
}
};
};