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

Question

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

我知道我可以放入我的html,然后使用el:"#test"设置一个视图,但这对于模式和其他不是Web应用程序核心的视图来说似乎有些过分.是否有规定的方法来执行此操作我在文档中遗漏了？我只是误解了观点应该如何运作？

Answer 1

骨干视图将为el您生成一个,而无需您做任何事情.默认情况下,它会创建一个<div>.但是,您可以生成所需的任何标记名称.实例化render视图后,在视图上实现一个方法,并el使用HTML 填充.

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