RactiveJS和jQuery插件

Question

我有一个带有多个字段的表单，其中一些是纯文本字段，而另一些则需要插件以实现高级选择和上传功能。

这里有两个问题：

- Ractive需要解析模板并在我附加插件之前进行渲染，因此存在一些小的延迟。 - 第二个问题是这样的插件会改变所提到字段周围的标记，这不能与Ractive生成的DOM树一起工作，因为该标记不同步。

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

- user2887067

Answer 1

与Ractive集成jQuery插件的好方法是使用装饰器。 装饰器是一个函数，当元素进入DOM时调用它返回一个带有teardown（）方法的对象，该方法在从DOM中删除元素时调用。

因此，如果您正在使用jQuery文件上传插件，则您的装饰器可能如下所示：

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

- Rich Harris

---

非常感谢您提供这样清晰简明的解释，正是我所期望找到的内容。这对我帮助很大。 - user2887067

这对我在使用jQuery UI选项卡（无法弄清如何为它们创建Ractive组件）和手风琴控件时提供了帮助。太好了！ - supervacuo

这在我编写可排序插件时非常有帮助。我只是包装了jQuery sortable。然而，我有一个问题...可能需要发布一个新帖子-我不确定... - Rob