Backbone：渲染嵌套视图

Question

我第一次使用Backbone而且我正在尝试研究如何在视图中渲染视图。我的父视图完全显示在页面上，我似乎无法在<div id="activity-feed"></div>内呈现嵌套视图。

我的父视图如下所示：

视图/ project_post_items.coffee

define ['jquery', 'underscore', 'backbone', 'templates', 'views/shared/project_post_item'],
($, _, Backbone, JST, ProjectPostItemView) ->
  class ProjectPostItemsView extends Backbone.View
    template: JST['app/scripts/templates/charity/project_post_items.ejs']
    posts_item_views: []

    initialize: ->
      super()

      @listenTo @model, 'change', @render
      if @model.dirty()
        @model.fetch()
      else
        @render()

      @listenTo(@collection, 'add', @displayPostItem)
      @collection.reset().fetch(add: true)

    displayPostItem: (project) ->
      view = new ProjectPostItemView(model: project)
      @posts_item_views.push( view.on('render', =>
        @$('#activity-feed').append(view.$('>'))) )

    render: (options) ->
      super(options)

我正在将我的帖子项目添加到我的收藏中，然后使用我的ProjectPostItemView功能创建一个新的displayPostItem()视图，并将这些项目推送到我的posts_item_views数组中。最后，我将项目附加到ID为#activity-feed的元素。

这是它链接到的模板：

模板/ project_post_items.ejs

<h2>Latest Updates</h2>

<div id="activity-feed"></div>

我的子视图（ProjectPostItemView）如下所示：

视图/ project_post_item.coffee

define ['jquery', 'underscore', 'backbone', 'templates', 'models/project_post_item'],
($, _, Backbone, JST, ProjectPostItemModel) ->
  class ProjectPostItemView extends Backbone.View
    template: JST['app/scripts/templates/shared/project_post_item.ejs']

    initialize: (options) ->
      @main_view = options.main_view
      super()
      console.log "hello"
      @render

    render: =>
      super({}, 'html')

它的模板如下：

模板/ project_post_item.ejs

<h1>Hello from the nested view</h1>

“hello”消息将被打印到控制台4次，这正是我在该集合中的项目数量。

所以它正在做正确的事情。我只想知道如何将此模板呈现给父视图。对Backbone.js来说很新，我无法弄清楚我做错了什么。

感谢任何帮助。提前谢谢！

更新

对于@Mathletics的请求，我添加了一些代码来阐明模板如何附加到DOM。

main.coffee

injectPageView: (sub_view, options={}) ->
  # clean and switch
  @current_page_view?.remove()
  # set up the new one
  @current_page_view = new sub_view(_.defaults(options, el: @$page_container, main_view: @))
  @side_menu_view.activate_item(_.result(@current_page_view, 'item_menu'))
  @listenTo(@current_page_view, 'url:fragment', (fragment) => @router.navigate("home/#{fragment}", trigger: false))
  @

charity_router.coffee

posts: (project_id) ->
  @main_view.injectPageView( ProjectPostItemsView, model: @data.charity, collection: @data.charity.getProjectPostItems(project_id) )