如何动态创建主干视图元素

How do you dynamically create Backbone view elements?

本文关键字：视图 元素 创建 何动态 动态      更新时间：2023-09-26

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

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

主干视图将为您生成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，例如下划线.js模板、Handlebars 或任何其他十几个或更多模板 JavaScript 模板引擎。

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

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

相关文章：