Created
March 29, 2017 18:10
-
-
Save fakefarm/d360447925b68f843ef63d943bea17a1 to your computer and use it in GitHub Desktop.
notes on backbone
This file contains hidden or 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
// I. Setup Architechture | |
// ----------------------------------------- | |
// 1. make the model | |
var Image = Backbone.Model.extend({}); | |
// 2. make the view | |
var ImageView = Backbone.View.extend({ | |
// 3. make the template | |
template: _.template($('#template').html()), | |
render: function () { | |
// 4. merge model data with template | |
var template = this.template({path: this.model.get('img')}); | |
// 5. append to dom | |
this.$el.append(template); | |
// 6. return this from render | |
return this; | |
} | |
}); | |
// II. Get the Data | |
// ----------------------------------------- | |
// 7. source custom data | |
var imgPath = "img/ephesians_mind_map.jpg"; | |
// III. Initialize new Objects | |
// ----------------------------------------- | |
// 8. put it into a new model | |
var img = new Image({img: imgPath}); | |
// 9. new up a view | |
var imgView = new ImageView({ | |
// 10. pass the model to the view | |
model: img, | |
// 11. what is the element to append to? (is this from the template, no name, or from the dom?) | |
el: "#app" | |
} | |
); | |
// IV. Interactions | |
// ----------------------------------------- | |
// 12. call render | |
imgView.render(); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment