大佬教程收集整理的这篇文章主要介绍了骨干解析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" } } ] } ]
Contact.Collections.employees = BACkbone.Collection.extend({ model: Contact.Models.employee,initialize: function(){ console.log("employees initialize"); },parse : function(responsE){ return response.employees; } });@H_910_2@mOdel和Collection中有一个parse(),用于url()处理的相同目的.
编辑:
我不是路由器的专家,但我想你必须在某些时候渲染View.
var view = new Contact.Views.employees({ collection: Contact.employees }); view.render();
以上是大佬教程为你收集整理的骨干解析json响应全部内容,希望文章能够帮你解决骨干解析json响应所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。