如何动态创建 Backbone 视图元素？答案

【问题标题】：How do you dynamically create Backbone view elements?如何动态创建 Backbone 视图元素？
【发布时间】：2012-04-13 12:26:24
【问题描述】：

我想在 Backbone js 应用程序中动态创建一些视图元素。当一个新视图被初始化时，我希望它把新元素插入到 DOM 中，将对该元素的引用存储在 view.el 中，并像往常一样委托事件。

我知道我可以放入我的 html，然后使用 el: "#test" 设置一个视图，但这对于模式和其他不是 Web 应用程序中心的视图来说似乎有点过分了。有没有规定的方法来做到这一点我在文档中缺少？我只是误解了视图应该如何工作吗？

【问题讨论】：

标签： javascript backbone.js backbone-views

【解决方案1】：

主干视图将为您生成一个el，您无需执行任何操作。默认情况下，它会创建一个<div>。不过，您可以生成任何您想要的标签名称。实例化视图后，在视图上实现 render 方法，并使用 HTML 填充 el。


MyView = Backbone.View.extend({});

var v = new MyView();
console.log(v.el); // => "<div></div>"


// define your own tag, and render contents for it

MyTagView = Backbone.View.extend({
  tagName: "ul",

  render: function(){
    this.$el.html("<li>test</li>");
  }
});

var v2 = new MyTagView();
v2.render();
console.log(v2.el); // => "<ul><li>test</li></ul>"

通常的做法是使用模板系统来呈现视图的 HTML，例如 Underscore.js 模板、Handlebars 或其他十几个或更多模板 JavaScript 模板引擎中的任何一个。

从视图生成内容后，您需要将其粘贴到 DOM 中的某个位置，然后才能看到它。这通常使用 jQuery 或其他插件来完成：

$("#some-element").html(v2.el);

【讨论】：