Search code examples
javascriptbackbone.jsmarionette

Properly Attaching a Backbone.Marionette LayoutView to the Application


I'm trying to use the marionette inspector, but the inspector can not find my views, presumably because they are not properly attached to the Application. What do I need to do to register an instance of Backbone.Marionette.LayoutView with a instance of Backbone.Marionette.Application?

Here is my current code (in coffeescript), which does not properly attach the view:

App = Backbone.Marionette.Application.extend({
    initialize: (options) ->
        console.log("App Initialized")
        LayoutView = Backbone.Marionette.LayoutView.extend({
            el: '#app'
            template: (data) ->
                return "<section>
                    <navigation id='menu'>...</navigation>
                    <article id='content'>...</article>
                  </section>"
            regions:
                menu: "#menu"
                content: "#content"
        })
        layoutView = new LayoutView()
        layoutView.render()
        sampleModel = new Backbone.Model(name: "test")
});


app = new App({container: '#app'})
app.start()

Solution

  • Question was answered by the helpful folks at the marionette-inspector github page.

    App = Backbone.Marionette.Application.extend({
        initialize: (options) ->
            console.log("App Initialized")
            LayoutView = Backbone.Marionette.LayoutView.extend({
                el: '#app'
                template: '#main_template'
                regions:
                    menu: "#menu"
                    content: "#content"
            })
            @rootView = new LayoutView()