CODEWITHSUNDEEP
backbone.jsmarionette
curious_gudleif
curious_gudleif

Reputation: 572

Marionette CompositeView behavior

I'm trying to follow a Backbone Rails tutorial and I'm getting stuck trying to render my collection of links in a CompositeView, no nesting involved. I suspect that tutorial is drastically outdated, but since I yet lack Backbone skills I can't pin point the problem. Please, take a look at the following code:

Creating a collection of navigational links.

@TestApp.module "Entities", (Entities, App, Backbone, Marionette, $, _) ->

class Entities.Navigation extends Backbone.Model

class Entities.NavigationCollection extends Backbone.Collection
    model: Entities.Navigation

API = 
    getLinks: ->
        new Entities.NavigationCollection [
            { name: "one"   }
            { name: "two"   }
            { name: "three" }
            { name: "four"  }
            { name: "five"  }
        ]

App.reqres.setHandler "navigation:entities", ->
    API.getLinks()

Core navigation file.

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

API =
    listNavigation: ->
        NavigationUnit.List.Controller.listNavigation()

NavigationUnit.on "start", ->
    API.listNavigation()

Controller, where I'm passing collection to the view.

@TestApp.module "NavigationUnit.List", (List, App, Backbone, Marionette, $, _) ->

List.Controller =

    listNavigation: ->
        links = App.request "navigation:entities"

        navigationView = @getNavigationView links
        App.navRegion.show navigationView

    getNavigationView: (links) ->
        new List.Navigation
            collection: links

And the view.

@TestApp.module "NavigationUnit.List", (List, App, Backbone, Marionette, $, _) ->

class List.NavigationLinks extends Marionette.ItemView
    template: "navigation/list/templates/_links"
    tagName: "li"

class List.Navigation extends Marionette.CompositeView
    template: "navigation/list/templates/list_navigation"
    itemView: List.NavigationLinks
    itemViewContainer: "ul"

Content of the ItemView template is %a{:href => "#"}= @name. And in the CompositeView is a basic wrapper structure with the %ul tag. Now what happens is that the CompositeView renders the template as expected, but it does not populate the %ul with the itemView. Instead it creates amount of divs equals to the amount of models in the collection (five in this case) and inserts there entire wrapper templates, so it looks like this: 

#navRegion
  .div
    .navigation-wrapper
      .navigation-content
         %ul
     .div
        .navigation-wrapper
          // entire template
     .div
        .navigation-wrapper
          // entire template
//etc +3 divs

What am I doing wrong here?

Upvotes: 1

Views: 109

Answers (1)

Cubed Eye
Cubed Eye

Reputation: 5631

Your tutorial is probably out of date. Marionette renamed the property from itemView to childView in version 2.0.0.

From the docs

Each childView will be rendered using the childView's template. The CompositeView's template is rendered and the childView's templates are added to this.

var ChildView = Marionette.ItemView.extend({});

var CompView = Marionette.CompositeView.extend({
  childView: ChildView
});

Upvotes: 2

Related Questions