Skip to content

Instantly share code, notes, and snippets.

@anvaka
Created September 18, 2012 01:34
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save anvaka/3740765 to your computer and use it in GitHub Desktop.
Save anvaka/3740765 to your computer and use it in GitHub Desktop.
Imagine perfect vew...
<!-- 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>
// 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