Difficulty getting Backbone layout manager to render view (not detecting model)

Question

I'm having difficulty with BLM in getting the model passed to the view. I decided to follow his overview steps to learn more. I worked out that the 'Baseview' he creates is Backbone.Layout and have created a fiddle which I think follows the process but can't get it to work...

    var MyFirstView = Backbone.Layout.extend({

    template: '<li><a href="#test" title="" class="recordName"><%= first_name %> <%= surname %></a><a href="#" class="button edit">Edit</a><a href="#" class="button delete">Delete</a></li>',


});

// Create a new instance.
var myFirstView = new MyFirstView({
    model: {
        first_name: 'Tom',
        surname: 'Branton'
    }
});

// Insert into the Document.
myFirstView.$el.appendTo("body");

// Render the View with the name `Tom Branton`.
myFirstView.render();

Can anyone help? Fiddle is http://jsfiddle.net/jmsherry/WHY67/1/

Answer 1

Use Marionette. https://github.com/marionettejs/backbone.marionette/blob/master/docs/marionette.layout.md

<script id="layout-template" type="text/template">
  <section>
    <navigation id="menu">...</navigation>
    <article id="content">...</article>
  </section>
</script>

AppLayout = Backbone.Marionette.Layout.extend({
  template: "#layout-template",

  regions: {
    menu: "#menu",
    content: "#content"
  }
});

var layout = new AppLayout();
layout.render();

layout.menu.show(new MenuView());

layout.content.show(new MainContentView());

Answer 2

You need to render the view before attaching the rendered content to the body, so just swap the code around and it should work.

// Render the View with the name `Tom Branton`.
myFirstView.render();

// Insert into the Document.
myFirstView.$el.appendTo("body");