0
API 상단에 백본이있는 프론트 엔드를 구축하고 있는데 change
이벤트가 트리거되지 않는 이유가 궁금합니다. 가져 오기 및 저장이 작동하지만 템플릿이 다시 렌더링되지 않습니다.모델 변경시 백본 컬렉션 변경이 트리거되지 않음
컬렉션
var Clients = Backbone.Collection.extend({
url: API.host + '/clients',
model: Client
});
모델
var Client = Backbone.Model.extend({
urlRoot: API.host + '/clients',
defaults: {
clients: {
number: '',
company: '',
address1: '',
address2: '',
city: '',
zip: '',
country: '',
tax: '',
email: '',
phone: ''
}
}
});
보기 당신은 때 컨텍스트를 통과해야합니다
var ClientsView = Backbone.View.extend({
id: 'content',
initialize: function() {
// instantiate Collection
this.model = new Clients();
// compile Handlebars template
this.tpl = Handlebars.compile(this.template);
// bind change and reset model events to rerender template
this.model.bind('change', this.render);
this.model.bind('reset', this.render);
},
render: function() {
var self = this;
var obj = this.el;
// get clients and set data to handlebars template
$.when(this.model.fetch()).then(function(response) {
$(obj).html(self.tpl(response));
}, function() {
$(obj).html(self.tpl);
});
return this;
},
events: {
"click #client-save": "save"
},
save: function(e) {
// cache target and parent object for quick form access
var obj = e.target;
var parent = $(obj).closest('#client-modal');
var client = new Client({
clients: {
number: parent.find('[name="number"]').val(),
company: parent.find('[name="company"]').val(),
address1: parent.find('[name="address1"]').val(),
address2: parent.find('[name="address2"]').val(),
city: parent.find('[name="city"]').val(),
zip: parent.find('[name="zip"]').val(),
country: parent.find('[name="country"]').val(),
tax: parent.find('[name="tax"]').val(),
email: parent.find('[name="email"]').val(),
phone: parent.find('[name="phone"]').val(),
web: parent.find('[name="web"]').val()
}
});
client.save();
return false;
}
});
'this.model.bind ('변화', this.render,이)'속임수를 썼는지! :)하지만 왜 내 컬렉션 인스턴스에 다른 이름을 사용해야합니까? – Slevin
뷰 내에서 model이라는 변수를 만들면 컨벤션을위한 백본은 뷰에 모델이 첨부되어 있다고 가정합니다. 이것은 사용자의 cenario가 아닙니다. – rcarvalho
'this.collection'은보기에서 'this.model'과 동일한 특별한 처리를하는 컬렉션 속성의 일반적인 이름입니다. ['listenTo'] (http://backbonejs.org/#Events-listenTo)는 보통'bind'보다는 이벤트를 연결하는 더 좋은 방법입니다. –