如何使用Backbone.Marionette构建用于创建项目的应用程序？

Question

这是使用Marionette仍然让我困惑的事情之一。

想象一个简单的界面，用于查看评论列表和发表新评论。 我正在构建这个的方式是使用我在下面包含的CommentApp 。

我想我的问题有两部分：

这是我应该如何构建这种类型的应用程序？ 我尝试在可能的情况下遵循BBCloneMail示例应用程序 ，但似乎没有提供在集合中创建新项目的示例。

为什么下面的layout.listRegion在我尝试调用.show()地方返回undefined ？ 更一般地说，是否有一种确定的方法来处理触发和绑定到具有嵌套布局的'layout:rendered'事件。 看起来好像让人感到困惑。

App.module "CommentApp", (CommentApp, App, B, M, $, _) ->
  class Layout extends M.Layout
    template: 'comment_layout'

    regions:
      listRegion: '#comment_list_region'
      newRegion: '#new_comment_region'

  class CommentView extends M.ItemView
    # this is as you would expect

  class NewCommentView extends M.ItemView
    # this is as you would expect
    # This view triggers a 'new:comment' on the CommentApp.vent
    # event aggregator when the user submits a new comment.

  class CommentsListView extends M.CollectionView
    # this is as you would expect
    # This view listens to the 'new:comment' event on the
    # CommentApp.vent event aggregator.

  # Public API
  # ----------

  CommentApp.showComments = (comments) ->
    # In here I need to render a layout
    layout = new Layout()

    # I also need to render a comments list an the
    # view for writing a new comment.
    commentsListView = new CommentsList(collection: comments)
    newCommentView = new NewCommentView()

    # THen I need to place these views into the layout when ready.
    layout.on "show", ->
      # This part fails because it seems that the layout.listRegion
      # is not yet defined for some reason. Don't understand why?
      layout.listRegion.show(commentsListView)
      layout.newRegion.show(newCommentView)

    # Now I need to stick the commenting layout into it's
    # place in the main app layout.
    App.layout.mainRegion.show(layout)


  App.addInitializer (options) ->
    @vent.bind "layout:rendered", -> CommentApp.showComments(comments)

'comment_layout'模板只是一个基本的容器模板：

<h2>Comments</h2>
<section id="comment_list_region"></section>
<section id="new_comment_region"></section>

我正在使用JST来渲染它。 我用这段代码覆盖了渲染函数：

# Override the marionette renderer to make it use JST.
Backbone.Marionette.Renderer.render = (template, data) ->
  # Check if a template is specified first.
  if template
    throw "Template '" + template + "' not found!" unless JST[template]
    JST[template](data)

Answer 1

结构体

您的应用程序通常按照我的方式进行结构化。 不过，我会改变几点。

例如，您不需要使用初始化程序为“layout：rendered”设置事件绑定。 你可以这样做：

App.vent.bind "layout:rendered", -> CommentApp.showComments(comments)

在这种情况下，在初始化程序内部设置事件绑定没有任何实际价值。

布局

为什么下面的layout.listRegion在我尝试调用.show（）的地方返回undefined？

...那个我不确定...虽然这段代码看起来有点奇怪： App.layout.mainRegion.show(layout)

这是打算成为App.mainRegion.show(layout)吗？

在调用布局的render方法时，将实例化布局的区域。 在区域中显示布局将调用布局的render方法，并且监听布局的show事件以便在布局的区域中显示内容应该可以正常工作。 事实上，我经常这样做。

不过，我已经看过几个与此类似的问题的报告，而且我认为这里有一个我无法隔离的错误。

comment_template指的是什么模板？ 这是一个预编译的模板吗？ 你是否覆盖了模板的渲染？ 如果是这样，你可以发布处理这个的代码吗？

如果你在布局的“show”事件处理程序中执行console.dir(layout) ，那么它会带来什么？ 你看到区域对象了吗？ 你还看到那个对象还有什么？