代码之家  ›  专栏  ›  技术社区  ›  jsetting32

加载模板时调用action函数(Ember.js)

  •  2
  • jsetting32  · 技术社区  · 12 年前

    我当前的应用程序有一个问题,我想在呈现页面时加载一堆数据

    像stackoverflow.com一样,当客户端单击导航栏上的配置文件链接时,会呈现一个新页面,其中包含从API获取的一组数据。

    在十二月,这将如何完成?我正在向我实现的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代表每日锻炼

    当呈现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和网络框架。。。普通php看起来简单多了:P

    1 回复  |  直到 12 年前
        1
  •  2
  •   Kingpin2k    12 年前

    您需要实际将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