RactiveJS和jQuery插件

我有一个表单有多个字段,其中一些表示纯文本,其中一些需要插件才能进行高级选择和上传功能.

这有两个问题：

> ractive需要解析模板并渲染它,然后我可以附加插件,以便有一些小的延迟
>第二个是这样的插件改变了所提及的字段周围的标记,并且不能与ractive生成的DOM树一起使用,因为该标记已经不在
同步.

解决这个问题的正确方法是什么？我真的很想使用ractive绑定所有的表单值并控制它的行为,但在这一点上似乎几乎不可能.

解决方法

将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...
    }
  };
};

RactiveJS和jQuery插件

解决方法

猜你在找的jQuery相关文章