jquery - RactiveJS 和 jQuery 插件

Question

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

这有两个问题:

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

解决这个问题的正确方法是什么？我真的很想使用 ractive 来绑定(bind)所有表单值并控制其所有行为，但目前看来几乎不可能。

Answer 1

将 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">

碰巧使用此插件，您可以使用 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...
    }
  };
};