Backbone

Stackoverflow

by Neviton

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.5.0/lodash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.2.3/backbone-min.js"></script>
<div id="users-list"></div>

<script type="text/template" id="connections-user-template">
	<span class="user-name"><%= name%></span> |
	<span class="user-email"><%= email%></span> |
	<span class="user-username"><%= username%></span>
	<button class="user-data">SELECT USER</button>
</script>

<script type="text/template" id="connections-template">
	<ul></ul>
</script>

CSS

ul {
  list-style: none;
  padding: 0;
}

JavaScript

var root = 'https://www.mocky.io/v2/56c665df110000640482b59e',
		app = {};
// Backbone Model
app.UserModel = Backbone.Model.extend();

// Backbone Model View
app.UserView = Backbone.View.extend({
  tagName: 'li',
  events: {
    'click .user-data': 'userClicked'
  },

  userClicked: function(ev) {
    console.log("User selected", this.model.toJSON());
  },

  template: _.template($('#connections-user-template').html()),

  render: function() {
    this.$el.append( this.template( this.model.toJSON()));
    console.log('User view is rendered');
    return this;
  }
});

// Backbone Collection
app.UserCollection = Backbone.Collection.extend({
  model: app.UserModel,
  url: root
});

// Backbone Collection View
app.UserCollectionView = Backbone.View.extend({
  template: _.template($('#connections-template').html()),

  initialize: function() {
    this.connections = new app.UserCollection();
    var self = this;
    this.connections.fetch({
    	success: function(collection) {
      	console.log(collection.toJSON());
      	self.render();
    	}
    });
  },

  render: function() {
  var self = this;
    console.log('User collection view is rendered');
    this.$el.html(this.template());
    this.connections.each(function(user) {
      console.log('User : ' + user.get('id'));
      var userView = new app.UserView({
        model: user
      });
      self.$el.find('ul').append(userView.render().el);
    });
    
    return this;
  }
});
var connectionsView = new app.UserCollectionView();
$('#users-list').html(connectionsView.render().el)