我一直在使用Backbone总共3天,我可以看到这已被问了很多,但说实话,我只是没有得到它.我一直在撞墙试图让一个基本的应用程序运行解析嵌套的json,我似乎无法解决它.如果我展开json响应并删除嵌套元素,这一切都有效,但这不是我将如何接收它.
我已经尝试了一些Backbone关系的例子,但我真的被困在这里,总骨干n00b,并希望得到一些帮助.
这是HTML：
<div id="employee-data">
<script type="text/template" id="employees-template">
<ol id="data-block">
</ol>
<div class="clear"></div>
</script>
<script type="text/template" id="employee-template">
<h2>Your employer: <span><%= employerName %></span> </h2>
<div>Employee Id: <span><%= employeeId %> </span></div>
<div>Name: <span><%= employeeName %> </span></div>
<div>Title: <span><%= employeeJobTitle %> </span></div>
<div>Location: <span><%= employeeLocation %> </span></div>
</script>
</div>
这是js：
var Contact = {
Models: {},Collections: {},Views: {},Templates:{}
}
Contact.Models.Employee = Backbone.RelationalModel.extend({});
Contact.Collections.Employees = Backbone.Collection.extend({
model: Contact.Models.Employee,url: "includes/test-data.json",initialize: function(){
console.log("Employees initialize");
}
});
Contact.Templates.employees = _.template($("#employees-template").html());
Contact.Views.Employees = Backbone.View.extend({
el: $("#employee-data"),template: Contact.Templates.employees,initialize: function () {
this.collection.bind("reset",this.render,this);
this.collection.bind("add",this.addOne,this);
},render: function () {
console.log("render")
console.log(this.collection.length);
$(this.el).html(this.template());
this.addAll();
},addAll: function () {
console.log("addAll")
this.collection.each(this.addOne);
},addOne: function (model) {
console.log("addOne")
view = new Contact.Views.Employee({ model: model });
$("ol",this.el).append(view.render());
}
})
Contact.Templates.employee = _.template($("#employee-template").html());
Contact.Views.Employee = Backbone.View.extend({
tagName: "li",template: Contact.Templates.employee,initialize: function () {
this.model.bind('destroy',this.destroyItem,this);
this.model.bind('remove',this.removeItem,render: function () {
return $(this.el).append(this.template(this.model.toJSON())) ;
}
})
Contact.Router = Backbone.Router.extend({
routes: {
"": "defaultRoute"
},defaultRoute: function () {
console.log("defaultRoute");
Contact.employees = new Contact.Collections.Employees();
new Contact.Views.Employees({ collection: Contact.employees }); //Add this line
Contact.employees.fetch({
error:function(response,xhr){
console.log(response);
console.log(xhr)
},success:function(){
console.log("success");
}
});
console.log(Contact.employees.length)
}
})
var appRouter = new Contact.Router();
Backbone.history.start();
最后是json：
[
{
"contactId" : "345345234","employees" : [ {
"employeeId" : "EE-00000001","employeeName" : "BubbA Ho-tep","employeeLegalFirstName" : "Bubba","employeePrefFirstName" : "","employeeLastName" : "Ho-tep","employeeMaritalStatus" : "Single","employeeBirthYear" : "1942","employeeJobTitle" : "","employmentStatus" : "Active","employmentTerminationDte" : "","employeeReferenceCode" : "EE1","employeeDivision" : "HR","employeeLocation" : "Downtown","employeeEmail" : "bubba.hotep@greatmovies.com","employer" : {
"employerId" : "ER-00000001","employerName" : "Initech"
}
} ]
}
]
解决方法
您应该在集合中使用
parse()方法：
Contact.Collections.Employees = Backbone.Collection.extend({
model: Contact.Models.Employee,initialize: function(){
console.log("Employees initialize");
},parse : function(response){
return response.employees;
}
});
MOdel和Collection中有一个parse(),用于url()处理的相同目的.
编辑：
我不是路由器的专家,但我想你必须在某些时候渲染View.
var view = new Contact.Views.Employees({ collection: Contact.employees });
view.render();