1 / 10

BackBone.js

BackBone.js. By. Phil Sheperd. What is BackBone. BackBone is a Javascript Framework How is this different From jQuery or Prototype? Libraries vs Framework BackBone is a way to structure your code. Why/When should you use BackBone.

toki
Download Presentation

BackBone.js

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  1. BackBone.js By. Phil Sheperd

  2. What is BackBone • BackBone is a Javascript Framework • How is this different FromjQuery or Prototype? • Libraries vs Framework • BackBone is a way to structure your code

  3. Why/When should you use BackBone • You should use BackBone to get your ‘Truth out of the DOM’. • Doesn’t make sense all the time

  4. Signs to use BackBone • You use a lot of data attributes in your html • You have a lot of hidden content to be displayed only on certain events happening • You ever see a line in your js like this:$($(this).children()[1]).html().trim();

  5. How is a BackBone App Structured • MCV • NOT MVC (Model, View, Controller) • Models • Data of your application • Models generally have attributes • Collections • A collections of the models • Views • Generally templates rendered with underscore.js

  6. Model • Create a new model by calling:var Question = Backbone.Model.extend({}); • Models can have default data defaults: { attribute : value} • Can also have url of where to save from (to advanced for this demo)

  7. Collection • var Questions = Backbone.Collection.extend( {model : Question} ); • It is a collection of models • These can also have a rootURLbut again, to advance for thisdemo

  8. Views • varCategoryView = Backbone.View.extend({ collection : Questions, template : _.template($('#column').html()) }); • View can be for collections or models • Templates are defined by underscore.js

  9. Views and Events and Templates • events : { 'click #fade' : 'clear', 'click .hint_button' : "showHint", 'click .showAnswer' : 'showAnswer’ } • <script type="template/text" id='modalView’> <span class='<%= answered ? "done" : ""%>' > <%= value %> </span></script>

  10. Rendering The View • There is one very important function in views at it is: Render • Every view has a this.el • this.el is the element that is put in the dom • this.$el is the jquery version of that element • Lets just start coding this stuff up • MORE Resources • http://backbonejs.org/ • http://documentcloud.github.com/backbone/#examples

More Related