在使用 Backbone.Marionette 时，ItemView 是常用的视图类型之一。默认情况下，ItemView 会将其模板渲染为一个 DIV 元素，并附加到 DOM 树上。但是，在某些情况下，我们可能希望避免这种行为，比如：
- 我们需要更自由地控制视图元素的标签和属性，而不仅仅是一个 DIV
- 我们希望使用一些较轻量的标签（如 SPAN）替代 DIV，以减少 HTML 结构的复杂度和性能开销
- 我们想要创建一个虚拟的视图对象，而不必实际将其插入到文档中
下面介绍两种方法来关闭 ItemView 的 DIV 包裹。
方法一：重写 ItemView 的 el 属性
通过重写 ItemView 的 el 属性，我们可以指定视图渲染后的根元素，从而实现关闭 DIV 包裹的效果。示例如下：
-- -------------------- ---- -------
----- ------ - ----------------------------
-- -- -- --
--- ---------
-- ----
--------- --------------- ------- -----
-- ---
------ --- ---------------- -------- ------- ---
---
-- -----------
----- ---- - --- ---------
-----------------------------------在上面的代码中，我们将 el 属性指定为 <span>，这样视图渲染后就会生成一个 SPAN 元素，并将模板内容插入其中。需要注意的是，在这种情况下，我们必须手动调用 render() 方法才能使视图渲染并生成元素。
方法二：使用 Underscore 模板替代 Marionette 模板
另一种方法是使用 Underscore 模板来替代 Marionette 的模板，从而避免 DIV 包裹的问题。示例如下：
-- -------------------- ---- -------
----- ------ - ----------------------------
-- -- ---------- --
--------- --------------------- ------- ------------
-- ---
------ --- ---------------- -------- ------- ---
---
-- -----------
----- ---- - --- ---------
-----------------------------------在这个例子中，我们将模板代码放在了一个 SPAN 元素内部，从而避免了使用 DIV 包裹。需要注意的是，在这种情况下，我们仍然需要调用 render() 方法才能使视图渲染并生成元素。
结论
无论是哪种方法，都可以有效地关闭 ItemView 的 DIV 包裹。但需要注意的是，在使用 Underscore 模板时，我们必须手动处理事件绑定和数据更新等问题，因为 Marionette 不会自动处理这些操作。因此，在具体场景中选择使用哪种方法，需要综合考虑方便性、可维护性和性能等因素。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/29529