Created
March 30, 2012 03:19
-
-
Save marka2g/2246169 to your computer and use it in GitHub Desktop.
CodeSchool Backbone Ch3
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// 1. Changing the class | |
var AppointmentView = Backbone.View.extend({tagName: 'li'}); | |
// 2. adding a class | |
var AppointmentView = Backbone.View.extend({ | |
tagName: 'li', | |
className: 'appointment' | |
}); | |
//3. TOP-LEVEL JQUERY | |
//Refactor the render function below to use the improved jQuery syntax on the top-level element | |
var AppointmentView = Backbone.View.extend({ | |
render: function(){ | |
this.$el.html('<li>' + this.model.get('title') + '</li>'); | |
} | |
}); | |
//4. USING A TEMPLATE | |
//Dr. Goodparts is getting ready to request some big changes to our AppointmentView. You know that eventually the HTML it generates is going to get pretty complicated, so now is probably a good time to refactor to use a template. | |
//Make sure you generate the same HTML after switching to templates. | |
//Tip: don't forget to use this.model.toJSON() in render. | |
var AppointmentView = Backbone.View.extend({ | |
template : _.template('<span><%= title %></span>'), | |
render: function(){ | |
var attributes = this.model.toJSON(); | |
this.$el.html(this.template(attributes)); | |
} | |
}); | |
//5. A VIEW EVENT | |
//Dr. Goodparts is just getting the hang of this web thing and thinks it'd be a good idea to alert the user the title of the appointment whenever they click on its view. | |
//See if you can't appease his bad idea and implement this tragic UI interaction using View events. | |
var AppointmentView = Backbone.View.extend({ | |
template: _.template('<span><%= title %></span>'), | |
events: { | |
"click span" : "alertTitle" | |
}, | |
alertTitle : function(evt){ | |
alert(this.model.get('title')); | |
}, | |
render: function(){ | |
this.$el.html(this.template(this.model.toJSON())); | |
} | |
}); | |
// 6. A BETTER VIEW EVENT | |
// Phew, over the weekend you convinced Dr. Goodparts to come to his senses and allow you to change the click event to only alert when the user double clicks on the view. | |
// Make those changes quick and deploy! | |
var AppointmentView = Backbone.View.extend({ | |
template: _.template('<span><%= title %></span>'), | |
events: { "dblclick span": "alertTitle" | |
}, | |
alertTitle: function(){ | |
alert(this.model.get('title')); | |
}, | |
render: function(){ | |
this.$el.html(this.template(this.model.toJSON())); | |
} | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment