我的应用程序当前存在问题,我想在渲染页面时加载大量数据
与 stackoverflow.com 一样,当客户端单击导航栏上的个人资料链接时,会呈现一个新页面,其中包含从 API 获取的大量数据。
在 ember 中,这将如何完成?我正在向我实现的 API 发出 GET 请求,并且我想显示响应中的所有数据。但是在我所处的情况下我将如何调用这样的函数。代码如下:
index.html:
<script type="text/x-handlebars">
<div id="header">
<div id="wrapper">
<a id="logo" href="/socialWOD"> </a>
<ul id="nav">
<li>{{#link-to "about" activeClass="selected"}}About{{/link-to}}</li>
<li>{{#link-to "wods" activeClass="selected"}}WODs{{/link-to}}</li>
<li>{{#link-to "login" activeClass="selected"}}Login{{/link-to}}</li>
<li id="search">
<form>
<input type="text" id="st-search-input" class="st-search-input" autocomplete="off"
autocorrect="off" autocapitalize="off" style="outline: none;" placeholder="Search"/>
</form>
</li>
</ul>
</div>
</div>
{{outlet}}
</script>
<!-- WODs List Template (Start)-->
<script type="text/x-handlebars" data-template-name="wods">
<div id="socialWODapp">
<div id="newentry">
<h1>socialWOD</h1>
{{input type="text" id="new-WOD-wod-category" placeholder="Enter new WOD category name" value=category action="create"}}
{{input type="text" id="new-WOD-name" placeholder="Enter WOD name" value=name action="create"}}
{{input type="text" id="new-WOD-description" placeholder="Enter WOD description" value=description action="create"}}
{{input type="text" id="new-WOD-workout" placeholder="Enter WOD workout" value=workout action="create"}}
</div>
<div id="main">
<ul id="wodlist">
{{#each}}
<h1>{{wod_category}}</h1>
<li>
<input type="checkbox" class="toggle">
<label>{{name}}</label><button class="destroy"></button>
</li>
<li>{{description}}</li>
<li>{{workouts}}</li>
{{/each}}
</ul>
<input type="checkbox" id="toggle-all">
</div>
</div>
</script>
<!-- WODs List Template (End)-->
wod_controller.js:
SocialWOD.WodsController = Ember.ArrayController.extend({
actions: {
getWODs: function() {
Ember.$.post('/socialWOD_API/?wods', data).then(function(response) {
console.log(response.message);
});
}
}
}
注意:WOD 代表每日锻炼
当呈现 WODs 页面时,如何调用 getWODs()?我可以使用静态 WOD FIXTURES,但是当我实现 GET 请求时,当然不会调用或获取任何内容。大家有什么想法吗?
编辑:甜蜜...我应该知道...如此简单...这就是我所做的:
SocialWOD.WodsRoute = Ember.Route.extend({
model: function() {
Ember.$.get('/socialWOD_API/?wods').then(function(response) {
return response;
});
}
});
现在我遇到了有关呈现信息的问题...在控制台中,我得到以下信息:
[{"objectId":"086f8db206","wod_category":"The New Girls","name":"Annie","description":"50-40-30-20-10 rep rounds, for time","workouts":"[\"Double-unders\",\"Sit-ups\"]","createdAt":"2014-07-31 13:24:33","modifiedAt":"2014-07-31 13:24:33"},{"objectId":"389b7518f4","wod_category":"The New Girls","name":"Eva","description":"5 rounds for time","workouts":"[\"Run 800 meters\",\"30 x 2-pood KB swings\",\"30 x Pull-ups\"]","createdAt":"2014-07-31 13:24:33","modifiedAt":"2014-07-31 13:24:33"},{"objectId":"7d91a57aea","wod_category":"The New Girls","name":"Kelly","description":"5 rounds for time","workouts":"[\"Run 400 meters\",\"30 x Box jump 24\"\",\"30 x Wall-ball\"]","createdAt":"2014-07-31 13:24:33","modifiedAt":"2014-07-31 13:24:33"},{"objectId":"07b6fa146c","wod_category":"The New Girls","name":"Lynne","description":"5 rounds for time","workouts":"[\"Max rep BW Bench\",\"Max rep BW Pull-ups\"]","createdAt":"2014-07-31 13:24:33","modifiedAt":"2014-07-31 13:24:33"},{"objectId":"0e834bd262","wod_category":"The New Girls","name":"Nicole","description":"As many rounds as possible in 20 minutes","workouts":"[\"Run 400 meters\",\"Max rep Pull-ups\"]","createdAt":"2014-07-31 13:24:33","modifiedAt":"2014-07-31 13:24:33"}]
为什么我的模板没有呈现信息?抱歉,我对 Ember 和使用 Web 框架非常陌生...纯 php 看起来简单得多:P
最佳答案
您需要实际返回对路由的 get 调用;)
SocialWOD.WodsRoute = Ember.Route.extend({
model: function() {
return Ember.$.get('/socialWOD_API/?wods').then(function(response) {
return response;
});
}
});
关于javascript - 加载模板时调用操作函数(Ember.js),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25127993/