如何使用 Backbone.js 中的嵌套视图解决循环依赖关系答案

【问题标题】：How to resolve circular dependencies with nested views in Backbone.js如何使用 Backbone.js 中的嵌套视图解决循环依赖关系
【发布时间】：2012-02-14 22:03:46
【问题描述】：

我正在使用 Brunch 和 Backbone.js 构建一个包含嵌套菜单的应用程序。我创建了一个 MenuItemModel 和一个 MenuItemsCollection，它们都扩展了它们对应的 Backbone-base-objects。

此外，我还有一个 MenuItemView（用于单个项目）以及一个 MenuItemsView（用于项目集合）。剥离下来，它们看起来像这样：

class MenuItemView extends Backbone.View
  tagName: 'li'

  initialize: (options) ->
      if @model.get('children')?
          childCollection = new MenuItemList
          childView = new MenuItemsView
              el: $('<ul>').appendTo @el
              collection: childCollection

class exports.MenuItemsView extends Backbone.View
    initialize: (options) =>
        @collection.bind 'add', @add

    add: =>
        view = new MenuItemView { model: @collection.last() }

如您所见，两个视图之间存在循环依赖关系，而且并非完全出乎意料，在我的 JS 控制台中，“childView = new MenuItemsView”行会导致“Uncaught ReferenceError: MenuItemsView is not defined”。

我的问题是有没有办法解决这个问题？我可以稍后在代码中通过递归函数创建嵌套菜单，但这似乎不像我想要的那样整洁和独立。此外，我在 SOF 上发现了以下两个实例，人们建议使用嵌套视图，就像上面的代码一样。我做错了什么？

https://stackoverflow.com/a/6476507

Nesting Views within Views in backbone js

【问题讨论】：

你试过class MenuItemsView extends Backbone.View而不是class exports.MenuItemsView extends Backbone.View吗？

标签： javascript backbone.js coffeescript circular-dependency

【解决方案1】：

由于您没有在MenuItemView 的类定义中使用MenuItemsView，因此应该没有任何问题。尝试改变

childView = new MenuItemsView

收件人：

childView = new exports.MenuItemsView

看起来您将 MenuItemsView 放入了导出命名空间，但 initialize 正在其自己的本地命名空间中寻找一个名为 MenuItemsView 的类。

【讨论】：