Question

我目前的应用程序存在问题，我希望在呈现页面时加载大量数据

与stackoverflow.com一样，当客户点击导航栏上的个人资料链接时，会呈现一个新页面，其中包含从API获取的大量数据。

如果在ember中，这将如何完成？我正在向我实现的API发出GET请求，我想显示响应中的所有数据。但是我如何在我所处的情况下调用这样的函数。继承代码：

index.html：

<script type="text/x-handlebars">
<div id="header">
  <div id="wrapper">
    <a id="logo" href="/socialWOD">&nbsp</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代表当天的锻炼

如何在呈现WOD页面时调用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很新，并使用网络框架...普通的php似乎更简单：P

Answer 1

您需要实际返回路由的get调用;）

SocialWOD.WodsRoute = Ember.Route.extend({
        model: function() {
          return Ember.$.get('/socialWOD_API/?wods').then(function(response) {
                    return response;
                });
        }
});

http://emberjs.jsbin.com/dukiq/1/edit

加载模板时调用动作函数（Ember.js）

1 个答案: