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

Question

I am doing a http://www.backbonerails.com/ tutorial and it's a bit outdated. I am trying to render a headers.jst.eco template and which displays "BackBoneRails Demo" as a header and renders links from Backbone.Collection in list_controller.js.coffee links from getLinksCollection(code below). Instead it re renders the header template several times, doesn't load the links/names and looks like this below in the screenshot

Here is the source code

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

(Didn't include FooterApp code since it works and not related to header template)

score 1 · Accepted Answer · answered Sep 17 '15 at 16:38

1

Haha, what a coincidence. I bought this series a couple of days ago. Absolute loved it.

Marionette has had some subtle changes. itemView and ìtemViewContainer are now called childView and childViewContainer:

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

(Sorry for the filthy JavaScript, but I'm more used to that than CoffeScript ;) )

answered Sep 17 '15 at 16:38

Tholle

108,070
19
198
189

1

Thank you! Oh man I wish the tutorials were updated. There were quite a few things I had to figure out to make it work due to updates to rails gems, etc. Do you have any other additional backbone tutorials that you are using? – CodeCrack Sep 17 '15 at 16:41
@CodeCrack I hear you :) I'm actually using [Sails.js](http://sailsjs.org/) as backend. But I think the slight bumps has made me learn more! Other sources I've found on Backbone are pretty rubish :( Putting all the logic in the views, etc. I really like his approach. If you haven't played around with it yet, I would suggest using the [Marionette Inspector](https://www.youtube.com/watch?v=AUJ0djPsunA) in addition to Brians debug techniques. – Tholle Sep 17 '15 at 16:48
I am actually using Sails.js for work so I wouldn't mind switching out for that as I go through this. I am also surprised Backbone resources are all outdated or not that great considering it was one of the most popular frameworks before. I am learning it because we use SailsJS on the backend and Backbone/Marionette on the front end. Do you have any way to contact you, maybe we can help each other out as we go through this tutorial! – CodeCrack Sep 17 '15 at 18:04
@CodeCrack Sounds like a great idea! You can email me at emtholin@gmail.com – Tholle Sep 17 '15 at 18:22

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

1 Answers1