Skip to content

Instantly share code, notes, and snippets.

@ryan-roemer
Created April 2, 2014 01:41
Show Gist options
  • Save ryan-roemer/9926540 to your computer and use it in GitHub Desktop.
Save ryan-roemer/9926540 to your computer and use it in GitHub Desktop.
Backbone.js Training - Day 2 - Customer Child/Parent Views
/**
* 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 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 Collection }}
<strong>Our valued customers</strong>
<ul>
</ul>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment