如何在没有包装器的情况下将 Backbone.View.el 绑定到模板？答案

【问题标题】：How to bind Backbone.View.el to a template without a wrapper?如何在没有包装器的情况下将 Backbone.View.el 绑定到模板？
【发布时间】：2014-03-25 20:02:08
【问题描述】：

这是我正在使用的模板

<script type="text/template" id="template-message">
  <p class="message"><%= message %></p>
</script>

这是我的 Backbone.View

var MessageView = Backbone.View.extend({

  template: _.template(Backbone.$("#template-message").html()),

  render: function() {
    this.$el.html(this.template(this.model.attributes));
    return this;
  },
});

我是如何使用它的

var msg  = new Message({message: "hello"}),
    view = new MessageView({model: msg});

$("body").append(view.render().el);

输出

<body>
  <div>
    <p class="message">
      hello
    </p>
  </div>
</body>

我理解为什么会发生这种情况（视图的默认 tagName 是 div），但我不希望那里有包装器 div。我想将其视为输出

<body>
  <p class="message">
    hello
  </p>
</body>

我知道我可以在我的视图中拥有这个

var MessageView = Backbone.View.exntend({
  tagName: "p",
  className: "message",
  // ...
});

最终用户将定义模板，因此我不希望在 Backbone.View 源代码中指定这些内容。

如何获得所需的输出并仍将视图绑定到 html？

【问题讨论】：

强制您的最终用户扩展您的 BaseMessageView。
最终用户将只定义 HTML 模板。他们不是在创建 JS 源文件。
显然你可以使用setElement。见这里stackoverflow.com/questions/7894253/…
@Gohn67，感谢您的指点。在您的帮助下，我提交了这个问题的答案。

标签： javascript backbone.js

【解决方案1】：

感谢@Gohn67 的评论，我得以完成这项工作

var MessageView = Backbone.View.extend({

  template: _.template(Backbone.$("#template-message").html()),

  initialize: function() {
    this.setElement(this.template(this.model.attributes));
  }

});

如果我们看一下Backbone Source Code，我们可以看到它setElement 做了我们想让它做的一切

// backbone source code
setElement: function(element, delegate) {
  if (this.$el) this.undelegateEvents();
  this.$el = element instanceof Backbone.$ ? element : Backbone.$(element);
  this.el = this.$el[0];
  if (delegate !== false) this.delegateEvents();
  return this;
},

它甚至处理事件委托。酷！

我最近不得不在 jQuery 1.3.2 上实现它。严重，我知道，但这是一个简单的修复。

唯一改变的部分是setElement 位

  initialize: function() {
    this.setElement(
      $( this.template(this.model.attributes) )
    );
  }

template 结果必须包裹在$() 中才能工作。我知道，考虑到 Backbone 已经在尝试自动执行此操作，这没有多大意义。这是我唯一能做的让它与 jQuery 1.3.2 一起工作的事情。

【讨论】：

【解决方案2】：

您也可以使用Backbone.Declarative.Views（我已经写过）并将el 属性（如tagName、className 等）定义为模板中的数据属性。见this answer on SO。

【讨论】：