我有一个表单有多个字段,其中一些表示纯文本,其中一些需要插件才能进行高级选择和上传功能.
这有两个问题：
> ractive需要解析模板并渲染它,然后我可以附加插件,以便有一些小的延迟
>第二个是这样的插件改变了所提及的字段周围的标记,并且不能与ractive生成的DOM树一起使用,因为该标记已经不在
同步.
解决方法
将jQuery插件与Ractive整合的好方法是使用
decorators.一个装饰器是当元素进入DOM时被调用的函数;它返回一个具有teardown()方法的对象,该方法在从DOM中删除时被调用.
所以如果你使用jQuery File Upload插件,你的装饰器可能看起来像这样：
var fileupload = function (node) {
$(node).fileupload();
return {
teardown: function () {
$(node).fileupload('destroy');
}
};
};
创建装饰器后,您需要注册.最简单的方法是使其在全球范围内可用…
Ractive.decorators.fileupload = fileupload;
…但是您也可以传入每个实例或每个组件的装饰器：
// instance will have the fileupload decorator
ractive = new Ractive({
// ...usual options...
decorators: { fileupload: fileupload }
});
// all instances of Widget will have the decorator
Widget = Ractive.extend({
decorators: { fileupload: fileupload }
});
然后,你可以在你的模板中使用它：
<input decorator="fileupload" type="file" data-url="whatever">
这样就可以使用这个插件来指定具有数据属性的选项.但是,如果您需要通过装饰器本身指定选项,则可以这样做：
<input decorator="fileupload:{{url}},{multiple:true}" type="file">
在本示例中,装饰器函数将接收两个附加参数 – 一个URL和一个选项对象：
Ractive.decorators.fileupload = function (node,url,options) {
// setup code...
return {
update: function (url,options) {
// if the options change (i.e. `url` updates),// this function is called
},teardown: function () {
// teardown code...
}
};
};