Backbone.js 是一个流行的前端框架，它提供了一组用于管理 JavaScript 应用程序中数据和 UI 的工具。其中一个核心概念是视图（View），即将数据呈现给用户的可见部分。在某些情况下，我们需要展示来自不同模型的相关数据，这时候就需要使用复杂视图（Complex Views），本文将介绍如何使用 Backbone.js 创建复杂视图。
多个模型的复杂视图
假设我们正在构建一个电影信息网站，其中包含电影列表、演员列表和评论列表。每个列表都由单独的模型支持，但是我们希望在同一个页面上展示它们。为此，我们需要创建一个复杂视图，该视图会从多个模型中抽取所需信息，并将其合并到一个屏幕上。
下面是一个基本的 HTML 文件结构：
--------- -----
------
------
------------ ---------------
-------
------
---- ------------------
---- ------------------
---- --------------------
------- ---------------------------------------------------------------------------------------------
------- ----------------------------------------------------------------------------------------
------- ----------------------
-------
-------我们需要创建一个包含三个子视图的主视图。每个子视图都与一个模型相关联，并使用该模型的数据进行呈现。
创建主视图
我们首先创建一个主视图，该视图将包含所有其他子视图。这里我们使用 Backbone.View.extend 方法来定义一个名为 AppView 的主视图：
--- ------- - ----------------------
--- -------
------- ---------- -
--- ---------- - --- ------------ ----------- ------ ---
-----------------------------------------------
--- ---------- - --- ------------ ----------- ------ ---
-----------------------------------------------
--- ------------ - --- -------------- ----------- -------- ---
---------------------------------------------------
------ -----
-
---在主视图中，我们使用 jQuery 的 $ 方法来引用 HTML 元素并将子视图插入到相应的位置。注意，我们使用了之前创建的 MoviesView、ActorsView 和 CommentsView 的实例。
现在我们需要创建三个子视图，每个子视图都与一个不同的模型关联。
创建子视图
我们依次创建 MoviesView、ActorsView 和 CommentsView 视图。由于它们的结构相似，我们只展示 MoviesView 的代码，其他两个视图的代码类似。
--- ---------- - ----------------------
-------- -----
----------- ---------- -
------------------------------ ------- -------------
--
------- ---------- -
-----------------
------------------------------------ -
--- ---- - --- ----------- ------ ----- ---
----------------------------------
-- ------
------ -----
-
---在 MoviesView 中，我们定义了一个名为 tagName 的属性，该属性指定了容器元素的标记类型。我们还在 initialize 方法中注册了一个事件监听器，以便在数据同步完成后重新呈现视图。最后，在 render 方法中，我们使用 collection.each 方法遍历模型集合，并将每个模型传递给子视图。
注意，我们还需要创建每个子视图所需的单独视图。在这里，我们创建一个名为 MovieView 的单独视图：
--- --------- - ----------------------
-------- -----
--------- ----------------------------------------
------- ---------- -
----
- ----------------------------------------------------------- --------
---------------------------------------------------------------------------------------