骨干视图中的 tagName、id 和 className 属性有啥用？虽然我们可以使用 el 访问 dom 元素

Posted 2023-02-24

【中文标题】骨干视图中的 tagName、id 和 className 属性有啥用？虽然我们可以使用 el 访问 dom 元素

【英文标题】：What is use of tagName, id, and className properties in Backbone View? While we can access dom element with el骨干视图中的 tagName、id 和 className 属性有什么用？虽然我们可以使用 el 访问 dom 元素

【发布时间】：2013-04-16 20:43:50

【问题描述】：

为什么属性tagName、id 和className 存在于主干视图中？

【参考方案1】：

如果您的视图必须创建自己的元素，即如果它在实例化时没有el 属性，则使用这些属性（各种原因，我可以在这件事上更进一步）。因此，您将拥有一个新元素，其 id 为 id，类 className 和属性 attributes。

您可以找到relevant piece of code here。这个_ensureElement 方法在视图的构造函数中使用。

【讨论】：

我们如何将自定义元素渲染到 DOM 中的所需位置？

@AlexanderMills 就像您将任何其他 html 添加到 DOM 中一样。类似$("#container").html(myView.$el);

【参考方案2】：

所有 Backbone 视图都有一个 el 属性 Read doc here。 如果在实例化视图时不传递 el，它将创建一个空的 DIV 并使用它。

现在，只是说您不想使用DIV 作为容器来呈现您的视图。您希望它改为UL。只需为您的视图指定 tagName 属性，它将被使用。

如果您想向容器中添加一些 css 类，请使用 className。

如果你想给它添加一些属性（例如你想给你的el添加data-*属性）使用Backbone视图的attributes属性。

【讨论】：

根据docs，attributes 用于创建this.el：“this.el 是从视图的 tagName、className、id 和 attributes 属性（如果指定）创建的”。所以你也可以设置attributes.class。它不是专门用于data-* 属性，尽管它可以用于此，以及通过jQuery.attr() 设置的任何东西

我们如何将自定义元素渲染到 DOM 中的所需位置？