Tuesday, April 17, 2012

backbone collection view example

//MODEL
var Appointment = Backbone.Model.extend({});

var AppointmentList = Backbone.Collection.extend({
  model: Appointment
});

//VIEWS
var AppointmentView = Backbone.View.extend({
  template: _.template('">' +
                        '<%= title %>' +
                        'x'),
  

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

//APPLICATION.JS
var AppointmentListView = Backbone.View.extend({
  render: function(){
    this.collection.forEach(this.addOne, this);
  },
  addOne: function(model){
    var appointmentView = new AppointmentView({model: model})
    appointmentView.render()
    this.$el.append(appointmentView.el)
  }
});

Backbone Basic

var Appointment = Backbone.Model.extend({});
var appointment = new Appointment();
appointment.set('title', 'My knee hurts');
var AppointmentView = Backbone.View.extend({
  render: function(){
    $(this.el).html('
  • ' + this.model.get('title') + '
  • '); } }); var appointmentView = new AppointmentView({model: appointment}); appointmentView; appointmentView.render() $('#app').html(appointmentView.el);