如何在ember.js中的html中显示json的嵌套数组

时间:2014-11-12 23:33:18

标签: jquery html ajax json ember.js

我正在尝试在html中显示我在app.js中收到的json,但它无效。有什么想法吗?

app.js的代码(我确定$ .post返回一个有效的json)

App.CadeirasRoute = App.AuthenticatedRoute.extend({
  model: function() {
    alert(this.getUsername());
     $.post('/api/database/cadeira/', {"token": this.postJSONWithToken()}).then(function(response) {
        if (response.success) {
            alert(response.results[0].codigo); // this alerts right on browser with the right value of codigo of the first json in the array

            return response.results;
        }
     });
  }
});

我在html中的代码

<script type="text/x-handlebars" id="cadeiras">
    <div id="cadeiras">
        {{#each item in model}}
      <h2>{{item.codigo}}</h2>
    {{/each}}
    </div>
  </script>

1 个答案:

答案 0 :(得分:0)

&#39;模型&#39;属性应该返回一个承诺

relevant api entry

您目前没有返回任何内容

这可以通过简单地添加&#39; return&#39;来解决。到这一行

 return $.post('/api/database/cadeira/', {"token": this.postJSONWithToken()}).then(function(response) {

虽然我认为更好的解决方案更有可能是返回Ember承诺

App.CadeirasRoute = App.AuthenticatedRoute.extend({
  model: function() {
    alert(this.getUsername());
    //create promise to be returned as per Ember api requirements
    return new Ember.RSVP.Promise(function(resolve, reject) {
        //submit ajax request similar to your previous one
        Ember.$.ajax({ 
            url: '/api/database/cadeira/',
            dataType: 'json',
            type: 'POST',
            data: {"token": this.postJSONWithToken()}),
            contentType: 'application/json'
        }).then(function(response) { //this handles a successful response
            alert(response.results[0].codigo);
            resolve(response.results);
        }, function(xhr) { //this handles a failed response
            var response = JSON.parse(xhr.responseText);
            Ember.run(function() {
                reject(response.error);
            });
        });
     });
  }
});

第一个函数传入&#39; .then()&#39;成功发生了什么,第二个是失败时发生的事情。 resolve(value)通过promise传递成功,在这种情况下,允许将模型设置为“已解决”的模式。值。

其他可能有用的链接

Ember.RSVP.Promise

(自定义令牌验证者w / promises的一个很好的例子)

Ember Simple Auth custom server example