主干解析json响应

我已经使用主干网3天了，我可以看到有人问了很多，但老实说，我就是不明白。我一直在努力让一个基本的应用程序运行解析嵌套json，但我似乎无法解决这个问题。如果我将json响应展平并删除嵌套元素，这一切都会起作用，但我不会这样接收它

我尝试了一些主干关系的例子，但我真的被困在这里，一个完整的主干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>

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, this);
    },

    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();

[
    {
  "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"
    }
  } ]
}
]

最后是json:

<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>

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, this);
    },

    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();

[
    {
  "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"
    }
  } ]
}
]

您应该在集合中使用以下方法：

Contact.Collections.Employees = Backbone.Collection.extend({
    model: Contact.Models.Employee,
    url: "includes/test-data.json",

    initialize: function(){
        console.log("Employees initialize");
    },

    parse : function(response){
        return response.employees;  
   }    

});

模型和集合中都有一个parse（），用于处理url（）的相同目的

编辑： 我不是路由器方面的专家，但我想你必须在某个时候渲染视图

var view = new Contact.Views.Employees({ collection: Contact.employees }); 
view.render();

---

模型附带了parse方法，所以当您发出mode.fetch（）请求时，可以在模型本身中解析输出

例如：

model=Backbone.model.extend({ urlRoot:“/category/”， 解析：函数（数据）{ 控制台日志（数据）； } })

---

var Model=new Model（{}）

不是答案，但为什么您一直在属性中添加后缀，如

employee

和

employment

？如果属性是在

员工

中定义的，则它必须是

员工

的属性。例如，仅仅说

id

和

name

而不是

employeeId

和

employeeName

，难道还不够吗？如果上下文发生变化，您只需添加一个包含这些新属性的新对象，就像您对

employer

所做的那样。我可以看到您对数据格式的看法，但是当我在请求后收到json时，我无法控制它的格式——这正是我从web服务获取json的方式。如果您使用这些属性名称（这是一件合理的事情），在您的模型上设置可能是一个好主意。谢谢，我也会这样做。好的。这让我通过了控制台错误，但我不知道如何将其连接到模板以显示页面中的数据，以及Contact.Views.Employees视图中的呈现函数……调试时是否将您的员工包含在collection.models中？我已编辑了呈现视图的响应；这是我个人的观点，但我更愿意添加

视图

后缀any View:

Contact.Views.EmployeesView

更具可读性。如果我理解您的编辑，请将该视图渲染添加到路由器。。。。我得到的结果和以前一样，但现在我得到了两次。但是仍然没有找到页面中的模板。不过，我不知道你说的让我的员工参加募捐是什么意思。我想是吧？因为如果我展平json，我可以成功地将数据发送到页面中的下划线模板。