gpt4 book ai didi

javascript - 将 JSON 数据渲染到 backbone.js 模板

转载 作者:数据小太阳 更新时间:2023-10-29 04:19:41 24 4
gpt4 key购买 nike

我环顾四周,找不到这个问题的答案。我正在尝试获取本地 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/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com