I am having an issue trying to get called a success callback after fetching a collection. Here is the code from the collection, the problem is excuting executeLongPolling
(function() {
window.StatusCollection = Backbone.Collection.extend({
longPolling : false,
intervalSeconds : 20,
model: Status,
url: function(){
return this.project.id + 'statuses/';
},
initialize : function(){
_.bindAll(this);
},
startLongPolling : function(invervalSeconds){
this.longPolling = true;
if( invervalSeconds ){
this.invervalSeconds = invervalSeconds;
}
this.executeLongPolling();
},
stopLongPolling : function(){
this.longPolling = false;
},
executeLongPolling : function(){
var that = this;
this.fetch({
success : function(collection, response, options) {
that.onFetch();
}
});
},
onFetch : function () {
if( this.longPolling ){
setTimeout(this.executeLongPolling, 1000 * this.intervalSeconds);
}
}
}); })();
Surprisingly, when I add the update option it works and the line that.onFetch() is called:
executeLongPolling : function(){
var that = this;
this.fetch({ update: true,
success : function(collection, response, options) {
that.onFetch();
}
});
},
I am using backbone-0.9.10. and backbone-relational-0.7.0
Any ideas what's wrong? Thanks!
Came across your issue while looking for solution to my issue where just adding to my collection(I don't use fetch) seems to be broken after upgrading to 0.9.10 from 0.9.2
Anywho, just glancing at your question, could have something to do with fetch having changed in 0.9.10
Look at these:
Backbone throwing collection[method] function error
https://github.com/addyosmani/backbone.paginator/issues/134
OR perhaps the fact that Backbone-relational isn't fully functional with 0.9.10 yet
https://github.com/PaulUithol/backbone-tastypie/pull/25
Related
I am working on developing a Backbone + require app. Things are working somewhat, but after updating a model on the server, though the server is returning a 200, the 'error' function in the options hash passed to the model's 'save' is being called.
I think I have identified the problem in that the server returns a JSON object containing 'id', whereas the model has an id attribute labeled 'aid'.
My understanding is that this should be handled in the model's 'parse' function, but I cannot get either the model's ''parse' function to be called. Here is my model:
define([
// These are path alias that we configured in our bootstrap
'jquery', // lib/jquery
'underscore', // lib/underscore
'backbone', // lib/backbone
'util'
], function($, _, Backbone){
// Above we have passed in jQuery, Underscore and Backbone
// They will not be accessible in the global scope
var Address = Backbone.Model.extend({
initialize: function() { console.log("Address initialized"); },
urlRoot: '/address/',
parse: function(response, options) {
console.log("In Address::parse");
for(thing in response) {
console.log("Key:" + thing + ", Val: " + response[thing]);
}
}
});
return {
address: Address
};
});
and here is the relevant part of my view:
events: {
"submit #add-address-form": "addAddress",
},
addAddress: function(ev) {
var that = this;
ev.preventDefault();
var addressDetails = $(ev.currentTarget).serializeObject();
var addr = new A.address();
addr.save(addressDetails, {
success: function(model, response, options) {
that.Backbone.application.router.navigate('', {trigger: true});
},
error: function(model, response, options) {
console.log("Response status: " + response.statusCode());
}
});
return false;
},
When the form presented by the view is submitted 'addAddress' is triggered and the server is updated. My app receives a 200 from the server, and the JSON object
'{id: }', but the parse function in the model is never called.
Any help appreciated;
You have to return a value in your parse function :
parse: function(response, options) {
console.log("In Address::parse");
for(thing in response) {
console.log("Key:" + thing + ", Val: " + response[thing]);
}
return response;
}
So my issue is that the collection in my function that is being fired from my router vent/event aggregator does not have access to my main collection's fetched models.
My guess is that it's an asynchronous call issue, but how can I make it so the vented function call WAITS until the collection/models are fetched before executing? Or is that even my issue?
Here's is my relevant code. I'm using require.js and backbone to create a modular AMD app. Thank you so much in advance:
main.js
require(['views/app'], function (AppView) {
window.App = {
Vent : _.extend({}, Backbone.Events)
};
new AppView();
router.js
define([
'backbone',
], function(Backbone){
var MainRouter = Backbone.Router.extend({
routes: {
'levelone/:id':'showWork'
},
showWork: function (index){
App.Vent.trigger('addressChange', {
index: index
});
}
});
return MainRouter;
});
App.js
define([
'backbone',
'views/levelone/LevelOneView',
'views/leveltwo/LevelTwoView',
'views/static/StaticView',
'router'
],
function(Backbone, LevelOneView, LevelTwoView, StaticView, MainRouter){
var AppView = Backbone.View.extend({
el: $("body"),
events: {
...
},
initialize: function(){
new LevelOneView();
App.router = new MainRouter();
Backbone.history.start();
},
.............
LevelOneView.js
initialize:function() {
this.getCollection();
this.domSetup();
App.Vent.on('addressChange', this.addressChange, this);
},
getCollection : function(){
var self = this;
onDataHandler = function(collection) {
self.LevelTwoCollectionGrab();
};
this.collection = new LevelOneCollection([]);
this.collection.fetch({ success : onDataHandler, dataType: "jsonp" });
},
// We grab a Level Two Collection here so we can take the ids from it and add them to our Level One collection.
// This is necessary so we can create links between the two levels.
LevelTwoCollectionGrab: function(){
var self = this;
this.leveltwocollection = new LevelTwoCollectionBase([]);
onDataHandler = function(collection){
self.render();
self.$el.animate({
'opacity': 1
}, 1200);
self.renderLevelTwoIds();
self.setLevelTwoids();
self.attachLevelTwoLink();
}
this.leveltwocollection.fetch({success : onDataHandler, dataType: "jsonp"});
},
renderLevelTwoIds: function(){
return this;
},
render: function(){
var pathname = window.location.hash;
this.setModelId(this.collection.models);
this.addPositionsToIndex();
this.determineModels();
this.attachLevelTwoLink();
.......
},
addressChange: function(opts){
console.log(this.collection.models)
//returns a big fat empty array. WHY?!
}
You could use the jQuery Promises returned by fetch to help you know when both collections are fetched.
initialize:function() {
this.getCollection();
this.domSetup();
App.Vent.on('addressChange', this.addressChange, this);
},
getCollection : function(){
var self = this;
console.log('should be first');
this.collection = new LevelOneCollection([]);
this.fetchingLevelOne = this.collection.fetch({ dataType: "jsonp" });
this.fetchingLevelTwo = this.leveltwocollection.fetch({ dataType: "jsonp"});
// wait for both collections to be done fetching.
// this one will always be called before the one in addressChange
$.when(this.fetchingCollectionOne, this.fetchingCollectionTwo).done(function(){
console.log('should be second');
self.render();
self.$el.animate({
'opacity': 1
}, 1200);
self.renderLevelTwoIds();
self.setLevelTwoids();
self.attachLevelTwoLink();
});
},
renderLevelTwoIds: function(){
return this;
},
render: function(){
var pathname = window.location.hash;
this.setModelId(this.collection.models);
this.addPositionsToIndex();
this.determineModels();
this.attachLevelTwoLink();
.......
},
addressChange: function(opts){
var self = this;
// wait for both collections to be done fetching.
// this one will always be called AFTER the one in getCollection
$.when(this.fetchingCollectionOne, this.fetchingCollectionTwo).done(function(){
console.log('should be third');
console.log(self.collection.models);
});
}
A nice thing about this, if the user is very very fast at typing in the address bar, and several addressChange calls are made, they will all wait until the collections are fetched and will execute in the proper order.
I think I solved it. Basically, I'm now calling the function inside of $.when function--
Like so:
$.when(this.collection.fetch(), this.leveltwocollection.fetch()).done(function(){
$.when(self.render()).done(function(){
_.each(self.collection.models, function(model){
var wpid = model.get('id'),
bbid = model.id;
if (wpid == index){
window.App.InfoPos.pos5 = bbid;
var modelinfo = model.toJSON();
$('.box5').empty();
$('.box5').html(tmplOne(modelinfo));
self.$el.animate({
'opacity': 1
}, 1200);
}
});
});
});
The function launches from inside the when call and then waits until completed before executing anything in the done function. Works now! Thanks for the help all, especially you Paul.
I have problem with validation in my model. It seems that it is impossible to use save().complete(function() {..... in the same time as validation- here is the code:
my model:
App.Models.Task = Backbone.Model.extend({
defaults: {
title:'',
completed: 0
},
validate: function (attrs, options) {
if(attrs.title == '' || attrs.title === undefined) {
return "fill title pls"
}
},
urlRoot: 'tasks'
});
and then in my view i try to save it in add method :
App.Views.TaskAdd = Backbone.View.extend({
tagName: 'div',
template: template('taskTemplateAdd'),
events : {
'click .addTask' : 'add'
},
initialize: function () {
this.model.on('add',this.render, this)
},
add : function () {
var title = $("#addNew input:eq(0)").val();
var completed = $("#addNew input:eq(1)").val();
this.model.set('title', title);
this.model.set('completed', completed);
this.model.save({},
{
success: function (model, response) {
console.log("success");
},
error: function (model, response) {
console.log("error");
}
}).complete(function () {
$("<div>Data sent</div>").dialog();
$('#list').empty();
});
},
render: function () {
this.$el.html(this.template(this.model.toJSON()));
return this
}
});
when validate fires i get error :
Uncaught TypeError: Object false has no method 'complete'
I understand that it tries probably to run complete callback on the return value but how to solve this problem ???
Model.save is documented returning the jqHXR object if successful or false if not.
So, unless your server never fails, you need to handle the case where save returns false. Here's a simple example of the logic you would need:
var valid=this.model.save();
if(!valid) {
// do something when not valid
else {
valid.complete(function() {}); // this is a jqHXR when valid
}
And, as of jQuery 1.8, the use of complete is deprecated. You should consider using always instead.
Use.
...
add : function () {
var self = this;
this.model.save({'title':$("#addNew input:eq(0)").val(),'completed':$("#addNew input:eq(1)").val()},
{
success: function (model, response) {
console.log("success");
self.complete();
},
error: function (model, response) {
console.log("error");
self.complete();
}
});
},
complete: function () {
$("<div>Data sent</div>").dialog();
$('#list').empty();
},
...
model.save() performs a validation first (validate method on the model). If it successfull, it then does the POST/PUT to the server. In other words, you get a false if the client side validation fails. It won't post to server then. You can't use the deferred object if this fails because false.always() will probally result in an error.
Alsoo, if you don't pass a wait: true in the model.save options, it will update the model with its validated object. I usually pass wait: true just to be sure. (I don't want to render the element twice).
If the model fails the client side validation, then it should also fail the server side validation. In this case there is an "invalid" event to listen to. So you only should be interested in the success call. Which in theory should only be interesting if it really has updates (would fire a "change" event)
add: {
var self = this;
this.model.on('invalid', function(error){
console.log(error, 'model is invalid. Check model.validate')
});
this.model.on('change', function(model){
console.log(model.toJSON(), 'model has successfully changed')
});
this.model.on('error', function(error){
console.log("server failed to acknowledge (server connection not made)")
});
this.model.on('sync', function(resp){
console.log("server successfull acknowledged (server connection made)")
});
this.model.save(
{
title:$("#addNew input:eq(0)").val(),
completed:$("#addNew input:eq(1)").val()
},
{
wait: true,
success: function (model, response) {
console.log("success");
#fires an change event if the model is updated
self.complete();
},
error: function (model, response) {
console.log("error");
self.complete();
}
}
);
},
complete: function(){
console.log("show this")
}
I have the following problem. On a user-event (click on .twitterDefault) I call save event with
twitter : {
handle : handle,
ignore : false
}
Then the success function gets called and I set fields on the model (klout, twitter and tester). All fields are set (logging statements all print out appropiate objects.
However, then I call view.render() and here twitter is not set anymore. I have no idea why, there is no sync happening after the save so twitter does not get overwritten (additionally I made sure twitter is also saved on the server before the success method gets called).
Any help greatly appreciated!
Code as follows (stripped to improve readability)
$(function() {
var ContactModel,
ContactModelCollection,
ContactView,
ContactCollectionView,
contacts,
contactCollectionView;
//base model
ContactModel = Backbone.Model.extend({
defaults : {
},
initialize : function() {
}
});
ContactModelCollection = Backbone.Collection.extend({
model : ContactModel,
url : '/api/contacts',
comparator : function(contact) {
return contact.get('strength_of_relationship');
},
initialize : function() {
}
});
ContactView = Backbone.View.extend({
tagName : 'li', //attempting to create a new element
render: function() {
var compiled_tmpl = _.template($('#contact-template').html());
var html = compiled_tmpl(this.model.toJSON());
console.log('model.get("twitter")=('+JSON.stringify(this.model.get('twitter)'))+')');
console.log('model.get("klout")=('+JSON.stringify(this.model.get('klout'))+')');
console.log('model.get("tester")=('+JSON.stringify(this.model.get('tester'))+')');
this.$el.html(html);
console.log('rendered view successfully)');
return this;
},
initialize: function() {
console.log('contactView initalized');
this.model.bind('change', this.render, this);
this.model.bind('destroy', this.remove, this);
},
events: {
'click .twitterDefault' : 'assignDefaultTwitterHandle',
},
assignDefaultTwitterHandle : function(event) {
var handle = $(event.currentTarget).data('twitter');
this.assignTwitterHandle(handle);
},
assignTwitterHandle : function(handle) {
console.log('model assignTwitterHandle. handle='+handle+')');
var view = this,
model = view.model;
model.save({
twitter : {
handle : handle,
ignore : false
},
id : model.get('id')
}, {
error : function() {
console.log('saving twitter handle failed');
},
success : function(model, response) {
console.log('response=('+JSON.stringify(response)+')');
if(response.error) {
console.log('error on server ='+response.error);
}
if(response.twitter) {
console.log('twitter is set');
var twitter = {
handle : handle,
tweet : response.twitter,
age : new Date()
};
console.log('setting twitter to '+JSON.stringify(twitter));
model.set('twitter', twitter);
model.set('tester', 'tester');
console.log('twitter after setting it = '+JSON.stringify(model.get('twitter')));
console.log('view\'s model twitter after setting it = '+JSON.stringify(view.model.get('twitter')));
}
if(response.klout) {
console.log('klout is set');
var klout = {
topics : response.klout
}
console.log('setting klout to '+JSON.stringify(klout));
model.set('klout', klout);
}
if(response.twitter || response.klout) {
console.log('Rerendering view after setting klout/twitter');
view.render();
}
}
});
}
});
contacts = new ContactModelCollection;
ContactCollectionView = Backbone.View.extend({
el : $('#suggestions-list'),
initialize : function(){
contacts.bind('add', this.addOne, this);
contacts.bind('reset', this.addAll, this);
contacts.bind('all', this.render, this);
},
render : function(){
console.log('contactcollectionview render');
},
addOne : function(contact) {
console.log('addOne');
var view = new ContactView({model: contact});
var el = view.render().el;
console.log('el=('+el+')');
$('#suggestions-list').append(el);
},
addAll : function() {
console.log('addAll');
contacts.each(this.addOne);
}
});
contactCollectionView = new ContactCollectionView;
App.contacts = contacts;
App.contactCollectionView = contactCollectionView; });
I guess the problem is the scope of the render function.
Depending from where is called, this takes a different value.
To warranty that always this is pointing to the View scope, add to your initialize:
_.bindAll(this,"render");
Also, it's not good habit to call view.render manually. You should let the events do their work. Model save already triggers some events. Just listen to them to update your View.
I have two functions that loop through all models in a Backbone collection, and save those that have been changed, or destroy those that have been selected for deletion. What I need to do is collate the success and errors, so that I can notify "X number of changes/deletions were successful" and/or "There was an error changing/saving X number of domains".
I've no experience with saving/destroying Backbone collections, only models; and can't find anything on the internet that shows how to do this.
The save and remove are called by events in the parent view.
The relevant code:
App.Views.SiteDomains = Backbone.View.extend({
el: '.site-domains',
initialize: function() {
this.collection.on('all',this.render, this);
},
render: function() {
$('.site-domains').empty();
this.collection.each( function(model)
{
var view = new App.Views.SiteDomain({model: model});
this.$('.site-domains').append(view.render().el);
return this;
});
},
saveDomainChanges: function() {
this.collection.each( function(model)
{
var ref = model.get('ref');
if ($('#' + ref).val() != model.get('domain')) {
$('.save-domains').prop('disabled', true);
var fields = $(this.el).find('form').serializeArray(), data = {};
$.each(fields, function(i, pair)
{
data[pair.name] = pair.value;
});
model.save(data, {
wait:true,
success: function(model, response, event)
{
// Pass each success to notification function
},
error: function(model, response, event)
{
// Pass each error to notification function
}
});
}
});
$('.save-domains').prop('disabled', false);
},
removeDomain: function() {
this.collection.each( function(model)
{
var ref = model.get('ref');
if ($('#remove-' + ref).prop('checked'))
{
model.destroy({
wait:true,
success:function() {
// Pass each success to notification function
},
error: function() {
// Pass each error to notification function
}
});
}
});
}
});
Many, many, many thanks in advance to anyone that can help with this! :)
You could use an event aggregator and create Model/View or just POJO for the notifications according to your app design. Something like this:
// Event aggregator
App.vent = _.extend({}, Backbone.Events);
// POJO for the notifications
App.notifications = {
var onCreateSuccess = function (model, response) {
...
};
var onCreateError = function (model, response) {
...
};
App.vent.on('sitedomain:create:success', onCreateSuccess);
App.vent.on('sitedomain:create:error', onCreateError);
};
// Add event triggering to corresponding callbacks
model.save(data, {
wait:true,
success: function(model, response, event) {
App.vent.trigger('createdomain:create:success', model, response);
},
error: function(model, response, event) {
App.vent.trigger('createdomain:create:error', model, response);
}
});