RactiveJS和jQuery插件

Question

我有一个有多个字段的表单，其中一些是纯文本的，有些是高级选择和上传功能所需的插件。

这方面有两个问题：

• ractive需要解析模板并呈现它，然后我才能附加插件，这样就有了一些小延迟。
• 第二种情况是，这样的插件改变了所提到的字段周围的标记，并且无法使用ractive生成的DOM树，因为标记不同步。

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

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;

...but还可以传入每个实例或每个组件的装饰器：

// 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和一个options对象：

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