Backbone.js Training - Day 2 - Customer Child/Parent Views

app.js

/**
 * Application.
 *
 * This file is usually the "binding" of all of the individual Backbone.js
 * components into a unified whole. It is also typically *not* unit tested
 * because it has side effects from just running it. So, here is the expected
 * place to also do things like start Backbone.js History, do `$()` DOM
 * manipulation, etc.
 */
define([
  "jquery",
  "backbone",

  // Import and compile HBS templates.
  "hbs!app/templates/customer",
  "hbs!app/templates/customers",

  // Polyfill JSON for old browsers.
  "json2",
  "backbone.localStorage"
], function (
  $,
  Backbone,
  customerTmpl,
  customersTmpl
) {
  "use strict";

  // --------------------------------------------------------------------------
  // Backbone.js Components.
  // --------------------------------------------------------------------------

  /**
   * Customer model.
   */
  var CustomerModel = Backbone.Model.extend({
    defaults: {
      firstName: "Ryan",
      lastName: "Roemer",
      email: "ryan.roemer@formidablelabs.com"
    }
  });

  /**
   * Customers collection.
   */
  var CustomersCollection = Backbone.Collection.extend({
    model: CustomerModel,
    localStorage: new Backbone.LocalStorage("bb-col-demo")
  });

  /**
   * Customer (model) child view.
   */
  var CustomerView = Backbone.View.extend({
    tagName: "li", // Creates an `li` element for view.
    template: customerTmpl,
    events: {
      "click .customer-btn": "logModel"
    },
    render: function () {
      this.$el.html(this.template(this.model.toJSON()));
      return this;
    },
    logModel: function (ev) {
      var msg = JSON.stringify(this.model.toJSON());
      this.$(".customer-msg").html("<pre>" + msg + "</pre>");
      window.console.log(this.model);
    }
  });

  /**
   * Customers (collection) parent view.
   */
  var CustomersView = Backbone.View.extend({
    el: ".hello",
    template: customersTmpl,
    render: function () {
      this.$el.html(this.template({}));

      this.collection.each(function (cust) {
        // Create view bound to element already in DOM.
        var custView = new CustomerView({
          model: cust
        });

        // Render child and append to existing list.
        this.$el.find("ul").append(custView.render().$el);
      }, this);

      return this;
    }
  });

  // --------------------------------------------------------------------------
  // Adjustments **just** for this demo page.
  // --------------------------------------------------------------------------
  // Hide the existing Notes HTML content for our skeleton application.
  // This hide can be removed later, once you are using the HTML content
  // in `index.html`.
  $(".notes-html").hide();

  // Dynamically add our element for the Backbone.js view
  // (Usually done in actual HTML).
  $("<div class='hello' />").appendTo($("body"));

  // --------------------------------------------------------------------------
  // Application Bootstrap
  // --------------------------------------------------------------------------
  // Actually wire up and kick everything off!
  //
  // **Note**: The `app.js` file is usually just comprised of **imports**
  // of the individual Backbone.js components above and the below function
  // on page load.
  $(function () {

    // Create data, and manipulate.
    var customers = new CustomersCollection();
    customers.reset();

    var customer = new CustomerModel();
    customers.add(customer);

    customers.create({
      firstName: "Bob",
      lastName: "Smith",
      email: "bob.smith@formidablelabs.com"
    });

    // Fire up view and render everything.
    var custsView = new CustomersView({
      collection: customers
    });
    custsView.render();
  });
});

customer.hbs

{{! Customer Model }}
<strong>{{firstName}} {{lastName}}</strong>
<p>Your email: {{email}}</p>
<button class="btn btn-default btn-small customer-btn">
  <span class="glyphicon glyphicon-star"></span>
</button>
<span class="customer-msg" />

customers.hbs

{{! Customers Collection }}
<strong>Our valued customers</strong>
<ul>
</ul>