骨干解析json响应

我一直在使用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" : "[e-mail]","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();

原文地址：https://www.jb51.cc/js/150220.html