Created
September 18, 2012 01:34
-
-
Save anvaka/3740765 to your computer and use it in GitHub Desktop.
Imagine perfect vew...
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
<!-- view --> | |
<div id='userTemplate' data-model='Domain.User'> | |
<div><b>First Name:</b> <%= firstName %></div> | |
<div><b>Last Name:</b> <%= lastName %></div> | |
<div><b>Age:</b> <%= age %></div> | |
</div> | |
<script> | |
// view model | |
View.UserView = inherit(BaseView, { | |
model : Domain.User, | |
view : 'userTemplate' | |
}); | |
// model | |
Domain.User = inherit(BaseModel, { | |
firstName : '', | |
lastName : '', | |
age : 0 | |
} | |
var johnSmith = new Domain.User({ firstName: 'John', lastName : 'Smith', age: 28 }), | |
view = new View.UserView({ model: johnSmith }); | |
view.renderTo('#usersList'); | |
// Now if you change model it is automatically updated on the view: | |
johnSmith.set({ age : 27 }); | |
</script> |
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
// now let's say we want to format number, before we render it: | |
View.UserViewFormatNumber = inherit(BaseView, { | |
model : Domain.User, | |
view : 'userTemplate' | |
initialize : function() { | |
this.model.on('change:age', this.formatAge); | |
}, | |
formatAge : function() { | |
// setting age on view model automatically | |
// tells the view to use viewmodels.age rather | |
// than model.age | |
this.age = utils.formatNumber(model.age); | |
} | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment