模板 re-renders 并且不在 Backbone/Marionette 中显示链接 - 骨干网教程

Question

我正在做一个 http://www.backbonerails.com/ 教程，它有点过时了。我正在尝试渲染一个 headers.jst.eco 模板并将 "BackBoneRails Demo" 显示为 header 并在来自 getLinksCollection 的 list_controller.js.coffee 链接中渲染来自 Backbone.Collection 的链接（下面的代码）。相反，它会多次重新呈现 header 模板，不会加载 links/names 并且在下面的屏幕截图中看起来像这样

这是源代码

app/assets/javascripts/backbone/apps/header/list/templates/_header.jst.eco

<a href="#"><%= @name %></a>

app/assets/javascripts/backbone/apps/header/list/templates/headers.jst.eco

<nav class="navbar navbar-default" id="header">
    <div class="container">
        <div class="pull-left">
            <span class="navbar-brand">BackboneRails Demo</span>
        </div>
        <ul class="nav navbar-nav pull-right">
        </ul>
    </div>

app/assets/javascripts/backbone/apps/header/list/list_view.js.coffee

@Demo.module "HeaderApp.List", (List, App, Backbone, Marionette, $, _) ->

  class List.Header extends Marionette.ItemView
    template: "header/list/templates/_header"
    tagName: "li"

  class List.Headers extends Marionette.CompositeView
    template: "header/list/templates/headers"
    itemView: List.Header
    itemViewContainer: "ul"

    </nav>

app/assets/javascripts/backbone/apps/header/list/list_controller.js.coffee

@Demo.module "HeaderApp.List", (List, App, Backbone, Marionette, $, _) ->

  List.Controller = 

    listHeader: ->
      links = @getLinksCollection()

      headerView = @getHeaderView links
      App.headerRegion.show headerView

    getLinksCollection: ->
      new Backbone.Collection [
        { name: "Link 1"}
        { name: "Link 2"}
        { name: "Link 3"}
        ]

    getHeaderView: (links) ->
      new List.Headers
        collection: links

app/assets/javascripts/backbone/apps/header/header_app.js.coffee

@Demo.module "HeaderApp", (HeaderApp, App, Backbone, Marionette, $, _) -> 
  @startWithParent = false

  API =
    listHeader: ->
      HeaderApp.List.Controller.listHeader()


  HeaderApp.on "start", ->
    API.listHeader()

app/assets/javascripts/backbone/app.js.coffee

@Demo = do (Backbone, Marionette) ->
    App = new Marionette.Application

    App.addRegions
        headerRegion: "#header-region"
        mainRegion: "#main-region"
        footerRegion: "#footer-region"

    App.addInitializer ->
      App.module("HeaderApp").start()
      App.module("FooterApp").start()

    App.on "start", ->
        if Backbone.history
          Backbone.history.start()

    App

（没有包含 FooterApp 代码，因为它可以工作并且与 header 模板无关）

Answer 1

哈哈，好巧啊。我几天前买了这个系列。绝对喜欢。

Marionette 有一些细微的变化。 itemView 和 ìtemViewContainer 现在称为 childView 和 childViewContainer:

List.Headers = App.Views.CompositeView.extend({
    template: 'header/list/templates/headers',
    childView: List.Header,
    childViewContainer: 'ul'
  });

（很抱歉脏了 JavaScript，但我比 CoffeScript 更习惯了；））

模板 re-renders 并且不在 Backbone/Marionette 中显示链接 - 骨干网教程

Template re-renders and doesn't display links in Backbone/Marionette - backbonerails tutorial

backbone.js

coffeescript

marionette

backbone-views

backbone.js-collections