loosing model instance after saving in backbone - backbone.js

Question

I'm using backbone with tastypie adapter and jquery for interacting with DOM. I found something in backbone that I can't understand. I tried to simplify the code for this question.
Here is my app.js:
$(document).ready(function() {
Point = Backbone.Model.extend({
defaults:{
lat:0,
lng:0
},
urlRoot: '/api/v1/point' ,
initialize: function(attributes){
var that = this;
$('#b1').bind('click',function() {
that.set('lat',that.get('lat')+1);
});
$('#b2').bind('click',function() {
that.save();
});
$('#b3').bind('click',function() {
console.log(that.get('lat'));
});
}
});
point = new Point ();
//****
$('#b1').click();
$('#b2').click();
$('#b3').click(); // >> 1
$('#b1').click();
$('#b2').click();
$('#b3').click(); // >> 2
//****
});
And my html:
<script src="/static/js/jquery.js"></script>
<script src="/static/js/backbone.js"></script>
<script src="/static/js/backbone-tastypie.js"></script>
<script src="/static/js/app.js"></script>
<button id="b1">b1</button>
<button id="b2">b2</button>
<button id="b3">b3</button>
As you see, I'm calling clicking on buttons in the code and the console is logging '1' and then '2' as expected.
The problem occurs when I am removing code between stars (//*) and pressing these buttons 'b1', 'b2', 'b3', 'b1', 'b2', 'b3' manually in browser and got '1' and '1' in console.
I wait for response from server for 1 second and check for it in console but the behavior of app is still the same: '1', '2' with a code with stars and '1', '1', with the button pressing.
Do you know why?

Answer 1

I wait for response from server for 1 second and check for it in console but [...]
Changing the model manually (click the button using your mouse) instead of programmatically (click()) is the crucial part here.
I assume you do not return the final model from your server, as Backbone update's your model with that data.
See section 53 and
if (options.wait) {
if (attrs && !this._validate(attrs, options)) return false;
current = _.clone(this.attributes);
}
section 55
options.success = function(resp, status, xhr) {
done = true;
var serverAttrs = model.parse(resp);
if (options.wait) serverAttrs = _.extend(attrs || {}, serverAttrs);
if (!model.set(serverAttrs, options)) return false;
if (success) success(model, resp, options);
};
of the Backbone.js documentation. Especially these lines:
var serverAttrs = model.parse(resp); (Parse model data from response)
if (!model.set(serverAttrs, options)) return false; (Update your model's attributes)
When your first code (the one where you click() the buttons) runs, it increases your models attribute and loggs it before the server returns. Thats
Note: using the wait option or a setTimeout() in your 2nd press of button three in your first code would equal the behaviour.
But what you want, is to return a valid model from your server (after persisting it).
Off topic tip: you should not bind your model and your view in the models initializer or constructor as it would couple them too tight and they wouldn't be interchangable. (For this question, it is certainly acceptable. ;)