我一直在尝试使用牵线木偶的复合视图,但是我的脚本不断出现错误"未捕获的类型错误:无法读取属性' _listenId'未定义"。彻底的黑客攻击显示"重置"复合视图永远不会触发事件:查看下面的代码: 我的模板
<script type="text/template" id="staff-list">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>course</th>
</tr>
</thead>
<tbody>
</tbody>
</script>
<script type="text/template" id="staff-list-item">
<td><%= fname %></td>
<td><%= lname %></td>
<td><%= course %></td>
</script>
View.Staff = Backbone.Marionette.ItemView.extend({
tagName: "tr",
template: "#staff-list-item",
});
View.Staffs = Backbone.Marionette.CompositeView.extend({
tagName: "table",
className: "table table-hover",
template: "#staff-list",
emptyView: NoStaffsView,
itemView: View.Staff,
itemViewContainer: "tbody",
initialize: function(){
this.listenTo(this.collection, 'reset', function(){
console.log("reset is called"); //it appears this is never reached
this.appendHtml = function(collectionView, itemView){
collectionView.$el.append(itemView.el);
}
});
},
onCompositeCollectionRendered: function(){
this.appendHtml = function(collectionView, itemView){
collectionView.$el.prepend(itemView.el);
}
}
});
define(["app","apps/staff/list/list_view"], function(SchoolManager, View){
SchoolManager.module("Staff.List", function(List, SchoolManager,Backbone, Marionette, $, _){
List.Controller = {
listStaffs: function(){
require(["entities/staff"], function(){
var fetchingStaffs = SchoolManager.request("staff:entities");
var contactsListLayout = new View.Layout();
var contactsListPanel = new View.Panel();
$.when(fetchingStaffs).done(function(staffs){
var contactsListView = new View.Staffs({
collection: staffs
});
contactsListLayout.on("show", function(){
contactsListLayout.panelRegion.show(contactsListPanel);
contactsListLayout.staffsRegion.show(contactsListView);
});
//console.log("dasud");
//console.log(staffs);
SchoolManager.mainRegion.show(contactsListLayout);
});
});
}
}
});
return SchoolManager.Staff.List.Controller;
});
define(["app","../config/storage/localstorage"], function(SchoolManager){
SchoolManager.module("Entities", function(Entities, SchoolManager, Backbone, Marionette, $, _){
// Private
// -------------------------
Entities.Staff = Backbone.Model.extend({
urlRoot: "staff",
defaults: {
fname: "",
lname: "",
course: ""
},
});
// Public
// -------------------------
Entities.configureStorage(Entities.Staff);
Entities.StaffCollection = Backbone.Collection.extend({
url: "staff",
model: Entities.Staff,
});
Entities.configureStorage(Entities.StaffCollection);
var initializeStaffs = function(){
contacts = new Entities.StaffCollection([
{ id: 1, fname: "Alice", lname: "Arten", course: "555-0184" },
{ id: 2, fname: "Bob", lname: "Brigham", course: "555-0163" },
{ id: 3, fname: "Charlie", lname: "Campbell", course: "555-0129" }
]);
contacts.forEach(function(contact){
contact.save();
});
return contacts.models;
};
var API = {
getStaffEntities: function(){
var staffs = new Entities.StaffCollection();
var defer = $.Deferred();
staffs.fetch({
success: function(data,response, options){
//console.log("we are winners");
defer.resolve(data,response, options);
}
});
var promise = defer.promise();
$.when(promise).done(function(staffs){
if(staffs.length === 0){
// if we don't have any contacts yet, create some for convenience
// var models = initializeContacts();
console.log("no initialization");
var models = initializeStaffs();
staffs.reset(models);
// var models = initializeContacts();
// staffs.reset(models);
// contacts.reset(models);
}
});
return promise;
},
getStaffEntity: function(staffId){
var staff = new Entities.Staff({id: staffId});
var defer = $.Deferred();
setTimeout(function(){
staff.fetch({
success: function(data){
defer.resolve(data);
},
error: function(data){
defer.resolve(undefined);
}
});
}, 2000);
return defer.promise();
}
};
SchoolManager.reqres.setHandler("staff:entities", function(){
return API.getStaffEntities();
});
SchoolManager.reqres.setHandler("staff:entity", function(id){
return API.getStaffEntity(id);
});
});
return;
});
我不知道我的代码有什么问题。我一直收到这个错误: 未捕获的TypeError:无法读取属性&#39; _listenId&#39;未定义的
我有什么问题吗?还是版本中有弃用?
答案 0 :(得分:0)
在这里
$.when(fetchingStaffs).done(function(staffs){
var contactsListView = new View.Staffs({
collection: staffs
});
员工需要是Backbone.Collection实例。但是,看起来延迟查询的结果只是一个简单的数组或对象。请参阅defer.resolve(data,response, options);
,其中data
是ajax请求的结果。
要修复getStaffEntities
功能,我会使用deferred.then()
进行链接,如下所示:
getStaffEntities : function () {
var staffs = new Entities.StaffCollection();
return staffs.fetch().then(function () {
if (staffs.length === 0) {
console.log("no initialization");
var models = initializeStaffs();
staffs.reset(models);
}
return $.when(staffs);
});
}