jquery - RactiveJS 和 jQuery 插件

Question

我有一个包含多个字段的表单，其中一些用于纯文本，其中一些需要插件以实现高级选择和上传功能。

这有两个问题：

• ractive 需要先解析模板并渲染它，然后我才能附加插件，所以会有一些小的延迟
• 第二个是此类插件更改了提到的字段周围的标记，并且不能与 ractive 生成​​的 DOM 树一起使用，因为该标记不同步。

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

Answer 1

将 jQuery 插件与 Ractive 集成的一个好方法是使用装饰器。装饰器是一个在元素进入 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">

碰巧使用此插件，您可以指定带有data-属性的选项。但是，如果您需要通过装饰器本身指定选项，您可以这样做：

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