RactiveJS和jQuery插件 [英] RactiveJS and jQuery plugins

问题描述

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

I have a form with multiple fields, some of them being for plain text and some of them require plugins for advanced select and upload capability.

这有2个问题:

• ractive需要先解析模板并进行渲染，然后才能附加插件，因此会有一些小的延迟
• 第二个问题是，此类插件会更改所提及字段周围的标记，并且无法与ractive生成的DOM树一起使用，因为该标记不在 同步.

• ractive needs to parse the template and render it before I can attach the plugins so there is some small delay
• the second one is that such plugins change the markup around mentioned fields and that cannot work with ractive's generated DOM tree because that markup is out of sync.

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

What is the right approach to solving this problem? I would really like to use ractive for binding all form values and controlling behaviour of it all but at this point it seems nearly impossible.

推荐答案

将jQuery插件与Ractive集成的一种好方法是使用

A good way to integrate jQuery plugins with Ractive is to use decorators. A decorator is a function that gets called when an element enters the DOM; it returns an object with a teardown() method that is called when it's removed from the DOM.

因此，如果您使用的是 jQuery File Upload 插件，则装饰器可能如下所示:

So if you were using the jQuery File Upload plugin, your decorator might look like this:

var fileupload = function (node) {
  $(node).fileupload();

  return {
    teardown: function () {
      $(node).fileupload('destroy');
    }
  };
};

创建装饰器后，需要注册.最简单的方法是使其在全球范围内可用...

Once you've created the decorator, you need to register it. The easiest way is to make it globally available...

Ractive.decorators.fileupload = fileupload;

...但是您也可以传入每个实例或每个组件的修饰符:

...but you can also pass in per-instance or per-component decorators:

// 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 }
});

然后，您可以像这样在模板中使用它:

Then, you can use it in your template like so:

<input decorator="fileupload" type="file" data-url="whatever">

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

It so happens that with this plugin you can specify options with data- attributes. But if you needed to specify options via the decorator itself, you could do so:

<input decorator="fileupload:{{url}},{multiple:true}" type="file">

在此示例中，decorator函数将接收两个附加参数-URL和options对象:

In this example, the decorator function would receive two additional arguments - a URL, and an options object:

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

这篇关于RactiveJS和jQuery插件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！