Created
February 12, 2015 15:31
-
-
Save jacobthemyth/0c1d2e5a196ae72dd862 to your computer and use it in GitHub Desktop.
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
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title></title> | |
| <link rel="stylesheet" href="main.css"> | |
| </head> | |
| <body> | |
| <form> | |
| <input type="text"> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam vitae similique autem ea animi dolore rerum delectus, natus, eos vel facere vero laborum beatae maiores nam rem iure saepe et.</p> | |
| </form> | |
| <script src="bower_components/jquery/dist/jquery.js"></script> | |
| <script src="bower_components/underscore/underscore.js"></script> | |
| <script src="bower_components/backbone/backbone.js"></script> | |
| <script src="main.js"></script> | |
| </body> | |
| </html> |
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
| (function(){ | |
| var AppModel = Backbone.Model.extend({ | |
| defaults: { | |
| color: "black" | |
| } | |
| }); | |
| window.appModel = new AppModel(); | |
| var AppView = Backbone.View.extend({ | |
| el: 'body', | |
| initialize: function(){ | |
| this.listenTo(this.model, 'change', this.render); | |
| }, | |
| render: function(){ | |
| this.$el.css({ | |
| 'background-color': this.model.get('color') | |
| }); | |
| } | |
| }); | |
| window.appView = new AppView({model: appModel}); | |
| var TextInputView = Backbone.View.extend({ | |
| el: 'form', | |
| events: { | |
| 'submit': 'changeColor' | |
| }, | |
| initialize: function(){ | |
| this.listenTo(this.model, 'change', this.render); | |
| }, | |
| changeColor: function(e) { | |
| e.preventDefault(); | |
| var color = this.$('input').val(); | |
| this.model.set('color', color); | |
| }, | |
| render: function(){ | |
| this.$('p, input').css('color', this.model.get('color')); | |
| } | |
| }); | |
| window.inputview = new TextInputView({model: appModel}); | |
| })(); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment