從JSON響應創建Ember對象並使用把手顯示

我試圖使用Ember來查詢JSON API，創建對象數據，然後通過我的Handlebars模板中的對象進行循環。我可以記錄response以及categories數組，我看到它們都被創建。我一直在我的模板中找到「找不到類別」。從JSON響應創建Ember對象並使用把手顯示

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陣列的nshot： array screenshot

來源

2014-04-03 kmm

在您的模板中，您是否嘗試過簡單地使用'{{#each}}'而不是'{{#each category}}'？ –

剛剛嘗試過，我得到這個錯誤：'未捕獲的錯誤：斷言失敗：#each循環的值必須是一個數組。你通過了（生成的索引控制器）' – kmm

檢查'App.Categories'裏面的'list'方法。此方法沒有返回語句，因此如果您調用它，則不會返回任何內容。 – Myslik

你有事情設置（這是罰款），你應該根據ArrayController類中創建一個索引控制器的方式：

App.IndexController = Ember.ArrayController.extend({ 

});

現在你的控制器可以與環繞在#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

來源

2014-04-04 00:27:33

我接受的解決方案就是我遇到的一個問題。我試圖使用上面提出的解決方案，但它沒有解決我的問題。經過幾個小時對我自己的問題進行調試後，我意識到存在一個我們都在做的問題！經過進一步的評估，看起來其中一條評論意識到了這個問題，但是我想讓這個更加明確，因爲幾個不同的人在論壇上遇到了這個問題而沒有真正的解決方案。

此代碼：

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; 
    }); 
}

是異步的。只要REST API使用JSON返回，Ember category對象就會被創建並返回。由於它的異步，模型鉤子調用列表函數，並認爲該調用已完成。

如果代碼被修改，使得返回的承諾：

list: function() { 
    return $.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; 
    }); 
}

灰燼會，直到承諾是成功還是失敗，因爲灰燼是真棒像阻斷模型掛鉤。

來源

2014-08-05 22:32:55 sunrize920

從JSON響應創建Ember對象並使用把手顯示

回答

相關問題