- xml - AJAX/Jquery XML 解析
- 具有多重继承的 XML 模式
- .net - 枚举序列化 Json 与 XML
- XML 简单类型、简单内容、复杂类型、复杂内容
我环顾四周,找不到这个问题的答案。我正在尝试获取本地 JSON 文件,使用 Backbone.js 加载它并将其呈现为浏览器中的模板。我的文件下载了,模板出现了,但它从未被数据填充。有什么想法吗?提前致谢。
HTML
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>People list</title>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.1/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<h1>People list</h1>
<hr />
<div class="page"></div>
</div>
<script type="text/template" id="people-template">
<table class="table striped">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Age</th>
<th>Photo</th>
<th>Video</th>
</tr>
</thead>
<tbody>
<% _.each(PersonCollection, function(Person) { %>
<tr>
<td><%= Person.get("firstName") %></td>
<td><%= Person.get("lastName") %></td>
<td><%= Person.get("age") %></td>
<td><%= Person.get("photo") %></td>
<td><%= Person.get("video") %></td>
</tr>
<% }); %>
</tbody>
</table>
</script>
</body>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.2/underscore-min.js" type="text/javascript"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/0.9.2/backbone-min.js"></script>
JavaScript
<script>
// MODEL MODEL MODEL
// MODEL MODEL MODEL
var Person = Backbone.Model;
// COLLECTION COLLECTION COLLECTION
// COLLECTION COLLECTION COLLECTION
var PersonCollection = Backbone.Collection.extend({
model: Person,
url: '/people.json',
parse: function (response) {
return response
}
});
// VIEWS VIEWS VIEWS
// VIEWS VIEWS VIEWS
var About = Backbone.View.extend ({
el: '.page',
render: function () {
var that = this;
var people = new PersonCollection();
people.fetch({
success: function (PersonCollection) {
var template = _.template($('#people-template').html(), {PersonCollection: PersonCollection.models});
that.$el.html(template);
}
})
}
});
var About = new About ();
// ROUTES ROUTES ROUTES
// ROUTES ROUTES ROUTES
var Router = Backbone.Router.extend({
routes: {
'': 'home'
}
});
var router = new Router();
router.on('route:home', function () {
About.render();
});
Backbone.history.start();
</script>
JSON 示例
{
"people": [
{
"firstName": "Jane",
"lastName": "Doe",
"age": "32",
"photo": "test_photo",
"video": "test_video"
},
{
"firstName": "James",
"lastName": "Hamm",
"age": "56",
"photo": "test_photo",
"video": "test_video"
},
再次感谢您的任何建议。我是 stackoverflow 的新手(第一个问题已发布),所以如果我需要提供更多信息,请告诉我。
最佳答案
如果您不想修改您的 JSON 文件,您可以更改 PersonCollection 中的解析函数以返回 person 数组。示例:
var PersonCollection = Backbone.Collection.extend({
model: Person,
url: '/people.json',
parse: function (response) {
// Return people object which is the array from response
return response.people
}
});
Backbone 文档:http://backbonejs.org/#Model-parse
parse is called whenever a model's data is returned by the server, in fetch, and save. The function is passed the raw response object, and should return the attributes hash to be set on the model. The default implementation is a no-op, simply passing through the JSON response. Override this if you need to work with a preexisting API, or better namespace your responses.
关于javascript - 将 JSON 数据渲染到 backbone.js 模板,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16639633/
在我的 OpenGL 程序中,我按顺序执行以下操作: // Drawing filled polyhedrons // Drawing points using GL_POINTS // Displa
我想传递一个包含原始页面的局部变量,这个变量只包含一个带有值的符号。 当我使用此代码时,它运行良好,可以在部分中访问 origin 变量: render :partial => "products",
为什么这个 HTML/脚本(来自“JavaScript Ninja 的 secret ”)不渲染? http://jsfiddle.net/BCL54/
我想在阅读完 View 后返回到特定的网页位置(跳转到页内 anchor )。换句话说,在 views.py 中,我想做类似的事情: context={'form':my_form} return r
我有一个包含单条折线的 PathGeometry,并以固定的间隔向该线添加一个新点(以绘制波形)。使用 Perforator 工具时,我可以看到每次向直线添加一个点时,WPF 都会将整个 PathGe
尝试了解如何消除或最小化网站上不同 JavaScript 库的渲染延迟。 例如,如果我想加载来自许多社交网络的“即时”关注按钮,它们似乎会相互阻止渲染,并且您会收到令人不快的弹出窗口。 (func
我有以 xyz 点格式表示 3D 表面(即地震断层平面)的数据。我想创建这些表面的 3D 表示。我使用 rgl 和 akima 取得了一些成功,但是它无法真正处理可能会自行折叠或在同一 x,y 点具有
我正在用 Libgdx 编写一个小游戏。 我有一个 Render[OpenGL] 线程,它不断对所有对象调用 render() 和一个更新线程不断对所有对象调用 update(double delta
我有一个 .Rmd 文件包含: ```{r, echo=FALSE, message=FALSE, results='asis'} library(xtable) print(xtable(group
关闭。这个问题是opinion-based .它目前不接受答案。 想要改进这个问题? 更新问题,以便 editing this post 可以用事实和引用来回答它. 关闭 9 年前。 Improve
请不要评判我,我只是在学习 Swift。 最近我安装了 MetalPetal 框架,并按照说明操作: https://github.com/MetalPetal/MetalPetal#example-
如果您尝试渲染 Canvas 宽度和高度之外的图像,计算机是否仍会尝试渲染它并使用资源来尝试渲染它?我只是想找出在尝试渲染图像之前检查图像是否在 Canvas 内是否更好。 最佳答案 我相信它仍然在无
我在 safari 中渲染时遇到问题。 在 firefox、chrome 和 IE 上。如下图所示: input.searchbox{-webkit-border-radius:10px;-moz-b
我正在尝试通过远程桌面在 Windows7 下运行我在 RHEL7 服务器中制作的 java 程序。 服务器中的所有java程序都无法通过远程桌面呈现。如果我在服务器位置访问服务器本身,它们看起来没问
我正处于一个新项目的设计阶段,该项目将采用数据集并将其加载到文档中,然后围绕模板呈现文档。呈现的文件可以是 CSV 数据集、PDF 营销信函、电子邮件……很多东西。数据不会是数学方程式,我只是在寻找一
有没有办法在不同的 div 下渲染 React 组件的子组件? ... ... ... ... ...
使用以下代码: import numpy as np from plotly.offline import iplot, init_notebook_mode import plotly.graph_
截至最近, meteor 的所有文档都指出 onRendered是一种在模板完成渲染时获取回调的新方法。和 rendered只是为了向后兼容。 但是,这似乎对我不起作用。 onRendered永远不会
所以在我的基本模板中,我有:{% render "EcsCrmBundle:Module:checkClock" %} 然后我创建了 ModuleController.php ... getDoctr
我正在使用 vue-mathjax 来编译我的 vue 项目中的数学方程。它正在编译第一个括号 () 之间的文本。我想防止编译括号内的字符串。在文档中我发现,对于$符号,如果我们想逃避编译,我们需要使
我是一名优秀的程序员,十分优秀!