Skip to content

Instantly share code, notes, and snippets.

@cuppster

cuppster/1.js

Created August 29, 2012 21:06
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save cuppster/3518966 to your computer and use it in GitHub Desktop.
Save cuppster/3518966 to your computer and use it in GitHub Desktop.
Download ZIP
Updating Views with Events, Models and Rivets
Raw
1.js
// ## Header View
//
var HeaderView = Backbone.View.extend({
// model backing the view
model: new (Backbone.Model.extend({
defaults: {
hasUpdate: false,
}
})),
initialize: function() {
var view = this;
// receive updated information from anywhere
// and set on the model
$('body').on('updateHeader', function(e, data) {
view.model.set(data);
});
// rivet things together
rivets.bind(view.$el, {status: view.model});
}
});
Raw
2.js
// ## App View
//
var AppView = Backbone.View.extend({
events: {
'click #uptodate' : function() {
this.$el.trigger('updateHeader', { hasUpdate: false } );
},
'click #outofdate' : function() {
this.$el.trigger('updateHeader', { hasUpdate: true } );
}
},
...
Raw
3.html
<body>
<header>
<h2>Status: </h2>
<ul>
<li data-rv-hide="status.hasUpdate" rel='status'>Up to Date</li>
<li data-rv-show="status.hasUpdate" rel='status'>I'm Out of Date</li>
</ul>
</header>
<button id='uptodate'>Set Up to Date</button>
<button id='outofdate'>Set Out of Date</button>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment