在骨干网中调用一个jQuery插件渲染方法 [英] Calling a jQuery plugin in a Backbone render method

问题描述

我在骨干渲染方法去基本上是这样的：

I have a render method in Backbone that goes basically like this:

render: function () {
  $.tmpl(this.template, attrs).appendTo(this.el);
  return this;
},

这是从路由器的行动称为：

which is called from a router action:

action: function () {
  $('#container').empty();
  $('#container').append(myView.render().el);
},

现在，我想标签此视图中的元素上应用的插件。我首先想到的是打电话给里面的插件渲染：

Now, I want to apply a plugin on label elements inside this view. My first thought was to call the plugin inside render:

render: function () {
  $.tmpl(this.template, attrs).appendTo(this.el);
  this.$('label').inFieldLabels();
  return this;
},

但是，这并不正常工作（我假设这是因为该元素还没有被添加到DOM还）。它的确实的工作，如果我把路由器行动插件，但：

but this doesn't work (I'm assuming this is because the element hasn't been added to the DOM yet). It does work if I call the plugin in the router action though:

action: function () {
  $('#container').empty();
  $('#container').append(myView.render().el);
  myView.$('label').inFieldLabels();
},

我宁愿不这样做，因为该插件认为，没有路由器的一部分，所以它没有任何意义来调用它的动作里面。有没有更好的方式来做到这一点？

I'd rather not do this, because the plugin is part of the view, not the router, so it doesn't make sense to be calling it inside the action. Is there a better way to do this?

推荐答案

我碰到了类似的问题，建立了jQuery工具工具提示插件。但我有一个非常不同的方法，效果很好：触发视图的自定义事件。据我所知，没有插入DOM'触发的事件建成骨干，所以我只是做我自己。我不使用路由器，但修改后的code以上会是这个样子：

I ran into a similar issue setting up the jQuery Tools Tooltip plugin. But I had a much different approach that works well: triggering a custom event on the view. As far as I know, there is no 'inserted into dom' event fired built into Backbone, so I just did it myself. I don't use a Router but the modified code above would look something like this:

// In the router:
action: function () {
    var container = $('#container');

    container.append(myView.render().el));
    myView.trigger('rendered');
},

// In the view:
initialize: function() {
    this.bind('rendered', this.afterRender, this);
},
render: function (container) {
    $(this.el).append($.tmpl(this.template, attrs))
    return this;
},
afterRender: function() {
    $('label', this.el).inFieldLabels();
}

我想好处是认为保持无知的容器。缺点是，它像code的一个额外的两行。但是，如果你需要安装大量的插件或做需要的元素是在DOM更多的东西，它会很好地工作（和它保持分离逻辑）。

I suppose the advantage is that the view stays ignorant of its container. The disadvantage is that it's like an extra line or two of code. But if you need to setup a lot of plugins or do more stuff that requires the element to be in the DOM, it will work well (and it keeps logic separated).

其实我喜欢@容器传递给视图Skilldrick的方法，但我还是觉得，如果它很有意义的父视图负责插入孩子。我是新来的骨干，所以请随意评论。

I actually like @Skilldrick's method of passing the container to the view, but I still feel as if it makes sense to have the parent view be responsible for inserting the children. I'm new to Backbone so please feel free to comment.

这篇关于在骨干网中调用一个jQuery插件渲染方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！