0
我一直在使用Backbone.LayoutManager處理原型骨幹應用程序,我遇到了一些我不明白的東西。Backbone.LayoutManager委託視圖事件
這種情況是我有一個表格,用於將「people」{firstname,lastname}添加到列表視圖中,我將模型保存好並且新項目顯示在列表中。我也有一個刪除功能,在刷新頁面後工作,但如果我嘗試刪除剛剛創建的用戶而不進行頁面刷新,則removeUser()函數永遠不會被調用。
我的代碼如下。有人可以幫我嗎?我只是想學習Backbone,如果你有這個問題的答案以及其他任何批評,我會很感激。謝謝。
define([
// Global application context.
"app",
// Third-party libraries.
"backbone"
],
function (app, Backbone) {
var User = app.module();
User.Model = Backbone.Model.extend({
defaults : {
firstName: "",
lastName: ""
}
});
User.Collection = Backbone.Collection.extend({
model: User.Model,
cache: true,
url: "/rest/user"
});
User.Views.EmptyList = Backbone.View.extend({
template: "users/empty-list",
className: "table-data-no-content",
render: function (manage) {
return manage(this).render().then(function() {
this
.$el
.insertAfter(".table-data-header")
.hide()
.slideDown();
});
}
});
User.Views.Item = Backbone.View.extend({
template: "users/user",
tagName: "ul",
className: "table-data-row"
events: {
"click .remove": "removeUser"
},
removeUser: function() {
console.log(this.model);
this.model.destroy();
this.collection.remove(this.model);
this.$el.slideUp();
if (this.collection.length === 0) {
this.insertView(new User.Views.EmptyList).render();
}
}
});
User.Views.List = Backbone.View.extend({
initialize: function() {
this.collection.on("change", this.render, this);
},
render: function (manage) {
if (this.collection.length > 0) {
jQuery(".table-data-no-content").slideUp("fast", function() {
$(this).remove();
});
this.collection.each(function(model) {
this.insertView(new User.Views.Item({
model: model,
collection: this.collection,
serialize: model.toJSON()
}));
}, this);
} else {
this.insertView(new User.Views.EmptyList());
}
// You still must return this view to render, works identical to
// existing functionality.
return manage(this).render();
}
});
User.Views.AddUser = Backbone.View.extend({
template: "users/add-user",
events: {
"click input#saveUser": "saveUser"
},
render: function (manage) {
return manage(this).render().then(function() {
$("input[type='text']")
.clearField()
.eq(0)
.focus();
});
},
saveUser: function() {
var user = new User.Model({
firstName: $(".first-name").val(),
lastName: $(".last-name").val()
});
this.collection.create(user);
this
.$("input[type='text']")
.val("")
.clearField("refresh")
.removeAttr("style")
.eq(0)
.focus();
}
});
return User;
});
最後發現這是因爲模型沒有從POST響應中正確更新id屬性。不知道如何解決。 – 2012-07-27 22:07:37
原來我沒有收到來自服務器的正確數據。我的服務器對POST的響應是以字符串形式返回的id,而不是像{{id:「aaaa-bbb-ccc-ddd」}'這樣的JSON對象。一旦解決了,一切正常。 – 2012-07-30 21:56:20