-
-
Save nikgraf/3881189 to your computer and use it in GitHub Desktop.
Example BackboneView for pjax like architecture
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
ArstistPageView = Backbone.View.extend({ | |
initialize: function(){ | |
// If model has changed, update view accordingly: | |
this.model.bind("all", this.render, this); | |
}, | |
render: function() { | |
// fetch the new rendered template from server | |
templateRequest = $.ajax({ url: "path/to/rendered/artist/template" }) | |
templateRequest.done(function(data) { | |
// render the template into dom | |
this.$el.html(data.renderedTemplate); | |
}); | |
return this; | |
}, | |
events: { | |
// usually I prefer using submit over click, because in this case users can use the keyboard | |
"submit #artist-form": "updateArtist" | |
}, | |
updateArtist: function ( event ){ | |
artistName = $(".artist-name").val() | |
// we need to have save true here, because in this | |
// case the event fires after saving the model | |
// otherwise the event would fire immediatly and | |
// fetching the template from the server could be faster | |
// then the actually saving it | |
this.model.save({ name: 'artistName' }, {wait: true}); | |
} | |
}); |
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
<div> | |
<span>DJ BOBO</span> | |
<form id="artist-form"> | |
<input type="text" class="artist-name" value="DJ BOBO"> | |
<input type="submit" value="Update"> | |
</form> | |
</div> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment