在使用 Backbone.js 开发 Web 应用程序时，有时我们需要控制 View 的输出，比如在不添加任何额外标记的情况下将它们嵌入到现有 HTML 中。但是，Backbone 默认会给每个 View 添加一个外部 DIV 标签，这可能与我们的设计不兼容。
本文将介绍如何防止 Backbone 给 View 添加外部 DIV 标签，并提供示例代码以帮助您更好地理解该过程。
问题分析
当我们使用 Backbone.View 定义一个视图类时，它会自动为我们创建一个 DOM 元素，这个元素会包含在一个外部 DIV 中。例如：
--- ------ - ----------------------
-------- -------
---------- ----------
------- ---------- -
--------------------- ---------
------ -----
-
---
--- ---- - --- ---------
--------------------------这段代码将创建一个 MyView 类，在 render 方法中设置 DOM 元素的文本内容。然后，它将创建一个新的实例并附加到 body 元素上。由于默认情况下，Backbone.View 会把 $el 属性包装在一个外层 DIV 中，所以最终生成的 HTML 代码将如下所示：
---- ---------------- ------------ ------------- ------
这对于许多应用程序来说是非常有用的，因为它可以使 View 具有更好的样式和层次结构。但是，如果您需要将 View 嵌入到现有布局中，则会出现问题。
例如，假设我们已经有一个包含以下 HTML 代码：
---- ------------------------
如果我们希望将 MyView 实例嵌入到这个容器中，我们可能会想要写下这样的代码:
--- ---- - --- --------- -----------------------------------
但是，由于 Backbone.View 默认添加了外部 DIV，最终生成的 HTML 代码看起来像这样：
---- ------------------
---- ----------------
------------ -------------
------
------这显然不是我们想要的结果。那么，如何让 Backbone 不再添加外部 DIV 标记呢？
解决方案
要解决这个问题，我们可以通过覆盖 Backbone.View 的 tagName 属性来实现。在覆盖后，Backbone 会使用我们指定的标记作为 View 的根元素，而不是默认的 DIV。
例如，如果我们想要使用之前的示例中的 span 标记而不是默认的 DIV，我们可以这样做：
--- ------ - ----------------------
-------- -------
---------- ----------
------- ---------- -
--------------------- ---------
------ -----
-
---
--- ---- - --- ---------
-----------------------------------这将产生以下 HTML 代码：
---- ------------------ ----- ---------------------- ------------- ------
正如您所看到的，现在我们的 View 不再有外部 DIV，而是直接嵌套在指定的容器中。
结论
这篇文章介绍了如何防止 Backbone 给 View 添加外部 DIV 标记。通过覆盖 tagName 属性，我们可以更好地控制 View 的输出，以更好地适应我们的设计需求。
虽然这个问题可能只涉及到一个非常特殊的用例，但了解 Backbone.View 的工作原理和如何覆盖默认行为对于开发高质量的 Web 应用程序来说是非常重要的。
示例代码
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/31186