gpt4 book ai didi

javascript - 从 JSON 响应创建 Ember 对象并使用 Handlebars 显示

转载 作者:行者123 更新时间:2023-12-02 04:55:31 24 4
gpt4 key购买 nike

我正在尝试使用 Ember 查询 JSON API,从数据中创建对象,然后循环访问我的 Handlebars 模板中的对象。我能够记录 response 以及 categories 数组,我看到它们都被创建了。我的模板中一直显示“未找到类别”。

app.js:

App = Ember.Application.create({
LOG_TRANSITIONS: true
});

App.Category = Ember.Object.extend();

App.Category.reopenClass({
list: function() {
$.getJSON("/api_url").then(function(response) {
var categories = [];
for(var i = 0; i < response.length; i++) {
// create a Category with a "name" property
categories.push(App.Category.create({ name: response[i]}));
}
// see screenshot for what this looks like logged to console
return categories;
});
}
});

App.IndexRoute = Ember.Route.extend({
model: function() {
return App.Category.list();
}
});

index.html:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My App</title>
</head>
<body>

<script type="text/x-handlebars" data-template-name="application">

<h1>My App</h1>

<div class="content">
{{outlet}}
</div>

</script>

<script type="text/x-handlebars" data-template-name="index">
<ul>
{{#each category}}
<li>Name: {{name}}</li>
{{else}}
<li>No categories found</li>
{{/each}}
</ul>
</script>

<script src="/kory/js/libs/jquery-1.10.2.js"></script>
<script src="/kory/js/libs/handlebars-1.1.2.js"></script>
<script src="/kory/js/libs/ember-1.5.0.js"></script>
<script src="/kory/js/app.js"></script>

</body>
</html>

示例 JSON 响应:

[
"Foo",
"Bar",
"Meow",
"Woof"
]

记录的 categories 数组的屏幕截图: array screenshot

最佳答案

您设置事物的方式(这很好)您应该基于 ArrayController 类创建一个 IndexController:

App.IndexController = Ember.ArrayController.extend({

});

现在您的 Controller 可以使用 #each 帮助程序循环:

<script type="text/x-handlebars" data-template-name="index">
<ul>
{{#each}}
<li>Name: {{name}}</li>
{{else}}
li>No categories found</li>
{{/each}}
</ul>
</script>

这是一个快速的 JSBin 示例:http://jsbin.com/wefof/4/edit

关于javascript - 从 JSON 响应创建 Ember 对象并使用 Handlebars 显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22849954/

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