title: This Backbone Marionette code to fetch from REST api seems wrong
body: <p>so this isn't a specific problem so much as a question on best practices, I guess.  I am just jumping into Backbone and Marionette and my head is swimming from reading a dozen articles and tutorials.  Each one seems to do things a little differently and none goes very in-depth, leaving out lots of details.  I found a Marionette jsFiddle online (<a href="http://jsfiddle.net/tonicboy/5dMjD/" rel="nofollow">http://jsfiddle.net/tonicboy/5dMjD/</a>) that provided a static model to a view and I managed to hack it to fetch data from a REST api (Foursquare public API - <a href="http://bit.ly/1cy3MZe" rel="nofollow">http://bit.ly/1cy3MZe</a>)</p>
  
  <p>However, it doesn't seem to jive right with Marionette's promise of "less boilerplate". In fact, I know I'm doing all sorts of hacky things, I just don't know what and my head is going to explode taking it all in.</p>
  
  <p>Here's the code in case you don't want to look at the Fiddle:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
    &lt;meta http-equiv="content-type" content="text/html; charset=UTF-8"&gt;
    &lt;title&gt;MarionetteJS (Backbone.Marionette) Playground - jsFiddle demo by tonicboy&lt;/title&gt;
    &lt;script type='text/javascript' src='http://code.jquery.com/jquery-1.8.3.js'&gt;&lt;/script&gt;
        &lt;script type='text/javascript' src="http://underscorejs.org/underscore.js"&gt;&lt;/script&gt;
        &lt;script type='text/javascript' src="http://backbonejs.org/backbone.js"&gt;&lt;/script&gt;
        &lt;script type='text/javascript' src="http://marionettejs.com/downloads/backbone.marionette.js"&gt;&lt;/script&gt;
    &lt;style type='text/css'&gt;
      #main span {
      background-color:#ffc;
      font-weight: bold;
  }
    &lt;/style&gt;
  &lt;script type='text/javascript'&gt;//&lt;![CDATA[
  $(function(){
  // Define the app and a region to show content
  // -------------------------------------------
  var App = new Marionette.Application();
  App.addRegions({
      "mainRegion": "#main"
  });
  // Create a module to contain some functionality
  // ---------------------------------------------
  App.module("SampleModule", function (Mod, App, Backbone, Marionette, $, _) {
      // Define a view to show
      // ---------------------
      var MainView = Marionette.ItemView.extend({
          template: "#sample-template"
      });
      // Define a controller to run this module
      // --------------------------------------
      var Controller = Marionette.Controller.extend({
          initialize: function (options) {
              this.region = options.region
          },
          show: function () {
              var Book = Backbone.Model.extend({
                  url: 'https://api.foursquare.com/v2/venues/4afc4d3bf964a520512122e3?oauth_token=EWTYUCTSZDBOVTYZQ3Z01E54HMDYEPZMWOC0AKLVFRBIEXV4&amp;v=20130808',
                  toJSON: function () {
                      return _.clone(this.attributes.response);
                  }
              })
              myBook = new Book();
              myBook.bind('change', function (model, response) {
                  var view = new MainView({
                      el: $("#main"),
                      model: model
                  });
                  this.region.attachView(view);
                  this.region.show(view);
              }, this);
              myBook.fetch();
          }
      });
      // Initialize this module when the app starts
      // ------------------------------------------
      Mod.addInitializer(function () {
          Mod.controller = new Controller({
              region: App.mainRegion
          });
          Mod.controller.show();
      });
  });
  // Start the app
  // -------------
  App.start();
  });//]]&gt;
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;header&gt;
       &lt;h1&gt;A Marionette Playground&lt;/h1&gt;
  &lt;/header&gt;
  &lt;article id="main"&gt;&lt;/article&gt;
  &lt;script type="text/html" id="sample-template"&gt;
      put some &lt;span&gt;&lt;%= venue.name %&gt;&lt;/span&gt; here.
  &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>