RactiveJS和jQuery插件

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

这有两个问题：

• ractive需要解析模板并呈现它，然后才能附加插件，因此会有一些小的延迟
• 第二个问题是，这样的插件改变了上述字段周围的标记，而这些标记无法与ractive生成的DOM树一起工作，因为该标记已过期 同步

---

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

将jQuery插件与ractive集成的一个好方法是使用。装饰器是在元素进入DOM时调用的函数；它返回一个带有

teardown（）

方法的对象，该方法在从DOM中删除该对象时被调用

因此，如果您正在使用该插件，您的装饰器可能如下所示：

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

在本例中，decorator函数将接收两个附加参数—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...
    }
  };
};

---

Rich非常感谢您的清晰简洁的解释。正是我希望找到的东西。这对我帮助很大，它只是帮助我解决了jQueryUI选项卡（无法完全解决如何为它们制作实用组件）和手风琴控件的问题。不错！这在编写可排序插件时帮了我大忙。我刚刚包装了jquerysortable。然而，我有一个问题。。。可能需要做一个新的职位-我不确定。。。

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