- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我已经使用 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, 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();
最后是 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,
url: "includes/test-data.json",
initialize: function(){
console.log("Employees initialize");
},
parse : function(response){
return response.employees;
}
});
模型和集合中都有一个 parse(),用于 url() 处理的相同目的。
编辑:我不是路由器方面的专家,但我想你必须在某个时候渲染 View 。
var view = new Contact.Views.Employees({ collection: Contact.employees });
view.render();
关于json - 主干解析 json 响应,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13257722/
我开发了一个 jquery &backbone.js 网络应用程序。 一个组件有一个 html 表,该表后面是一个主干.js 集合。 此集合中的任何更改都应该导致 html 表的更新,所以我写 thi
我创建了一个由 HTTP Basic 保护的无状态 RESTful API。 在客户端,我将创建一个登录表单,向/auth-check 发送请求以检查凭据,并根据状态代码,将这些凭据存储在客户端并使用
我已经有一个具有经典结构的存储库 /branches /current /beta /tags /1.0 /2.0 /trunk 我想从当前的编辑器切换到 Eclipse,但我应该创建
我正在阅读 red bean SVN book ,它说要像这样布局主干、分支和标签文件夹: $ svn list file:///var/svn/multi-project-repo project-
当特定属性发生变化时,Backbone 模型触发自定义事件的好方法是什么? 到目前为止,这是我得到的最好的: var model = Backbone.Model.extend({ initi
我想避免在 Backbone.Collection 上的每个“添加删除重置”事件上重新渲染。 所以在 Backbone.View 中我可能有: this.listenTo(this.collectio
这一定是我没有正确理解的东西。 我有一个名为 Album 的 Backbone 模型: var Album = Backbone.Model.extend({ idAttribute: "_id",
假设我有一个具有一堆 bool 属性的 Backbone 模型: Car = Backbone.Model.extend({}); car_one = new Car({ a_c: true,
我从 collection.fetch() 调用中得到一个包含多个嵌套对象的对象。有没有办法解析这些子对象并将它们作为单独的模型传递到集合中? 这是我要返回的数据的示例。从服务器获取时,我想将它作为
有一个脚本(js),我希望在它上面运行,比如$(document).ready()。有一种方法可以在模板(例如 home_tpl.html)文件中编写脚本。但我确信这不是一个好方法。 我正在从主干 V
配合我正在尝试从主干集合中包含的所有模型中获取更大的属性。 举个例子: App.Models.Example = Backbone.Model.extend({ defaults: {
我遇到这样一种情况,我需要为一个人保存几个对象,但一次保存一个对象,并且在获取时,我将所有对象作为一个数组以及该人的信息。 这是模型的样子: //Model for one save { pe
我开始阅读一些 Backbone 教程,发现一件让我惊讶的事情。为什么模型是在 View 内部创建的?如果我想要一个模型有两个不同的 View (我认为 MVC 的用途)怎么办?假设我需要一个模型 C
我使用backbone.js 创建了一个小型网站。它托管在 IIS 7 中。 路由: routes: { "/": "index", "": "ind
我现在正在构建一个 View ,当我单击 .organization 链接时,我想触发我的编辑事件,但是单击此元素时,没有任何内容被触发,我无法理解为什么。 这是构建我的 View 的代码, App.
我有一些全局参数,我想在每次调用集合上的提取时发送这些参数...我的问题是我不想声明 data: { ... }每次我获取。 有没有一种方法可以在 Collection 本身内部提供默认参数,并可以添
Backbone 新手在这里。我想开始在 Web 应用程序上使用主干(后端是 Ruby on Rails),直到现在它的客户端功能还很少(一些用于执行 slideToggles 的 jquery,以及
我想知道是否有办法从其中一个模型中获取对集合的引用。例如,如果下面集合中的任何人以某种方式知道属于一个集合或多个集合。 Fiddle (function() { window.App = {
如何在集合获取中阻止模型的解析功能? $(function() { var Task = Backbone.Model.extend({ url : function(
我们一直在使用位于文件夹根目录中的存储库,一切都很好。然而,自从网站上线后,我们需要对一些工作进行分支,但由于缺少主干而无法这样做。 我的问题是,如何在当前目录结构中创建一个主干并将所有当前内容移动到
我是一名优秀的程序员,十分优秀!