我想在 Backbone js 应用程序中动态创建一些视图元素。当一个新视图被初始化时,我希望它把新元素插入到 DOM 中,将元素的引用存储在 view.el 中,并像往常一样委托事件。
我知道我可以放入我的 html,然后使用 el:"#test" 设置一个视图,但这对于模式和其他不是 Web 应用程序核心的视图来说似乎有点过头了。有没有规定的方法来做到这一点我在文档中缺少?我只是误解了视图应该如何工作吗?
我想在 Backbone js 应用程序中动态创建一些视图元素。当一个新视图被初始化时,我希望它把新元素插入到 DOM 中,将元素的引用存储在 view.el 中,并像往常一样委托事件。
我知道我可以放入我的 html,然后使用 el:"#test" 设置一个视图,但这对于模式和其他不是 Web 应用程序核心的视图来说似乎有点过头了。有没有规定的方法来做到这一点我在文档中缺少?我只是误解了视图应该如何工作吗?
主干视图将为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);