我有一个表单有多个字段,其中一些表示纯文本,其中一些需要插件才能进行高级选择和上传功能.
这有两个问题:
> 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... } }; };