6

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

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

4

1 回答 1

7

主干视图将为el您生成一个,而无需您做任何事情。默认情况下,它会创建一个<div>. 不过,您可以生成任何您想要的标签名称。一旦你实例化了视图,在视图上实现一个方法,并用你的 HTMLrender填充。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);

于 2012-04-13T12:40:17.343 回答