0
Backbone.LayoutManager를 사용하여 프로토 타입 Backbone 응용 프로그램을 작성 중이며 잘 모르겠습니다.Backbone.LayoutManager 위임 된 뷰 이벤트
"사람"{firstname, lastname}을 목록보기에 추가 할 수있는 양식이 있는데 모델을 저장하면 새 항목이 목록에 나타납니다. 또한 페이지를 새로 고친 후 작동하는 제거 기능이 있지만 페이지 새로 고침없이 방금 만든 사람을 삭제하려고하면 removeUser() 함수가 호출되지 않습니다.
내 코드는 다음과 같습니다. 누군가 나를 도울 수 있습니까? 나는 단지 백본을 배우려고 노력 중이고,이 질문에 대한 답은 물론 다른 비판들에 대해서도 감사 할 만하다. 감사.
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 속성을 올바르게 업데이트하지 못하기 때문에 이러한 상황이 발생했다는 것을 알게되었습니다. 고칠 방법을 모르겠다. –
서버에서 올바른 데이터를받지 못했다는 사실이 드러납니다. POST에 대한 내 서버 응답은'{id : "aaaa-bbb-ccc-ddd"}'와 같은 JSON 객체 대신 문자열로 반환 된 ID입니다. 그것이 고쳐 지자 모든 것이 올바르게 작동했습니다. –