Новичок в магистрали, я подхожу к нему с тривиальным примером, но я застрял на запуске событий.
На моей странице я ПОЛУЧАЮ некоторые данные с сервера и инициализирую с ними представление. Затем я могу изменить данные через форму, они сохраняются на сервере, и вскоре после этого шаблон обновляется новыми данными. Данные извлекаются, сохраняются и представление обновляется, но через консоль я вижу, что функция рендеринга вызывается иногда дважды, иногда даже 4 раза! И обращение к серверу тоже делается на время как ПОЛУЧИТЬ, ПОЛУЧИТЬ, ПОЛУЧИТЬ, ПОЛУЧИТЬ.
Что я делаю неправильно?
<script type="text/x-handlebars-template" id="modelTpl">
<ul>
<li><strong>Nome:</strong> {{nome}}</li>
<li><strong>Cogome:</strong> {{cognome}}</li>
</ul>
<input type="text" id="nome" />
<input type="text" id="cognome" />
<a id="changeBtn">Modifica</a>
</script>
Model = Backbone.Model.extend({
urlRoot: 'server/model.php/model',
defaults: {
nome: "",
cognome: ""
}
});
var model = new Model({id: 1});
View = Backbone.View.extend({
el: '#wrapper',
template: Handlebars.compile($('#modelTpl').html()),
events: {
"click #changeBtn": "change"
},
initialize: function(){
this.render();
this.listenTo(this.model, "change", this.render);
},
render: function(){
console.log('render');
var self = this;
this.model.fetch({
error: function(model, response, options) { },
success: function(model, response, options) {
var data = model.toJSON();
self.$el.html(self.template(data));
}
});
return this;
},
change: function() {
var n = this.$('#nome').val();
var c = this.$('#cognome').val();
this.model.save({ nome: n, cognome: c }, {
error: function(model, response, options) { },
success: function(model, response, options) { }
});
}
});
var view = new View({ model: model });