javascript - 如何使用 Backbone.Marionette 构建一个用于将项目创建到列表中的应用程序？

Question

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

想象一个简单的界面，用于查看评论列表并发表新评论。我目前构建此结构的方式是使用 CommentApp，如下所示。

我想我的问题有两个部分:

这是我应该构建此类应用程序的方式吗？我试图遵循 BBCloneMail Example App在可能的情况下，但这似乎没有提供在集合中创建新项目的示例。

为什么下面的 layout.listRegion 在我尝试调用 .show() 时返回 undefined ？更一般地说，是否有一种明确的方法来处理具有嵌套布局的 'layout:rendered' 事件的触发和绑定(bind)。看起来似乎变得相当困惑。

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”的事件绑定(bind)。您可以这样做:

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

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

布局

Why is the layout.listRegion below returning undefined where I try call .show() on it?

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

这本来是App.mainRegion.show(layout)吗？

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

不过，我最近看到了一些与此类似的问题的报告，我认为这里的某个地方存在一个我无法隔离的错误。

模板comment_template指的是什么？这是某个地方的预编译模板吗？您是否覆盖了模板的渲染？如果是这样，您可以发布处理此问题的代码吗？

如果您在布局的“show”事件处理程序中执行 console.dir(layout) ，它会返回什么？你看到区域对象了吗？您在该物体上还看到了什么？