Backbone App

Backbone App.markdown

Backbone App

A Pen by Kevin Colten on CodePen.

License.

index.html

<div id="person-list"></div>
<div id="person-detail"></div>

script.js

'use strict';

var AppRouter = Backbone.Router.extend({

  initialize: function() {
    Backbone.history.start();
  },

  routes: {
    '': 'index'
  },

  index: function() {
    var people = new PeopleCollection();
    people.fetch()
    var peopleListView = new PeopleListView({
      collection: people
    });
    $('#person-list').html(peopleListView.$el);
    peopleListView.render();
  }
});

var PersonModel = Backbone.Model.extend({
  urlRoot: 'https://reqres-api.herokuapp.com/api/users',
  idAttribute: 'id',
});

var PeopleCollection = Backbone.Collection.extend({
  url: 'https://reqres-api.herokuapp.com/api/users',
  model: PersonModel
});

var PeopleListView = Backbone.View.extend({
  el: '<ul></ul>',

  initialize: function() {
    this.listenTo(this.collection, 'update', this.render);
  },

  render: function() {
    var that = this;
    that.$el.html('');
    this.collection.each(function(person) {
      var personItemView = new PersonItemView({
        model: person
      });
      that.$el.append(personItemView.$el);
      personItemView.render();
    });
    return this;
  }
});

var PersonItemView = Backbone.View.extend({
  template: _.template('<a href="#"><%= user.get("first_name") %></a>'),
  el: '<li></li>',

  events: {
    'click a': 'viewPersonDetail'
  },

  viewPersonDetail: function(e) {
    e.preventDefault();
    this.model.fetch();
    var personDetailView = new PersonDetailView({
      model: this.model
    });
    $('#person-detail').html(personDetailView.$el);
    personDetailView.render();
  },

  render: function() {
    this.$el.html(this.template({
      user: this.model
    }));
    return this;
  }
});

var PersonDetailView = Backbone.View.extend({
  template: _.template('<img src="<%= user.get("avatar") %>">'),
  
  initialize: function() {
    this.listenTo(this.model, 'sync', this.render);
  },

  render: function() {
    this.$el.html(this.template({
      user: this.model
    }));
    return this;
  }
});
new AppRouter();

zvaWeb.markdown

zvaWeb

A Pen by Kevin Colten on CodePen.

License.