基本的Ember.js路由和數據加載

Question

在不斷變化的Ember.js世界中，我正在尋找一些有關簡單應用程序啟動和運行的幫助。

我試圖通過一個帶Ember.js的API通過JSON加載數據來獲得一些基本框架，但是無法獲取數據。 代碼可以在這里找到：

var App = Ember.Application.create();

App.ApplicationController = Ember.Controller.extend();
App.ApplicationView = Ember.View.extend({
    templateName: 'application'
});

App.Movie = Ember.Object.extend({
    title: null,
    rating: null,
    release_date: null,
    poster_image: null
});

App.MoviesView = Ember.View.extend({
    templateName: 'movie-list'
});

App.moviesController = Ember.ArrayController.create({
    content: [],
    init: function(){
        var me = this;
        $.getJSON('/trailers/api/movies',function(data){
            me.set('content', []);
            $(data.movies).each(function(index,value){
                var t = App.Movie.create({
                    title: value.title,
                    rating: value.rating,
                    release_date: value.release_date,
                    poster_image: value.poster_image
                });
                me.pushObject(t);
            })
        });
    }
});

App.router = Ember.Router.create({
    enableLogging: true,
    root: Ember.Route.extend({
        index: Ember.Route.extend({
            route: '/',
            redirectsTo: 'movies'
        }),
        movies: Ember.Route.extend({
            route: '/movies',
            connectOutlets: function(router) {
              return router.get('applicationController').connectOutlet({
                viewClass: App.MoviesView,
                controller: App.moviesController
              });
            }
        })
    })
});

App.initialize(App.router);

<script type="text/x-handlebars" data-template-name="application">
  <h1>Application</h1>
  {{outlet}}
</script>

<script type="text/x-handlebars" data-template-name="movie-list">
  <h2>Movie List</h2>
  <ul>
  {{#each App.movieController}}
    <li><a {{action showMovie context="movie" href=true}}>{{title}}</a></li>
  {{/each}}
  </ul>
</script>

http://jsfiddle.net/qmZrT/

模板正確加載，因為我可以看到“應用程序”和“電影列表”標題，但無序列表不會填充數據。

我在控制台中沒有出現任何錯誤，XML請求被正確返回，如果我輸入App.movi​​esController.content，我會得到一個“類”數組，它似乎包含來自我的API的數據。

有人可以提供任何想法或指導嗎？

Answer 1

您的腳本存在一些問題

1. 您正在加載庫的順序 ：Ember取決於Handlebars，因此必須在 Ember 之前加載 。 我改變了訂單。
2. {{action}}幫助器已更改以支持多個上下文：請閱讀此內容 。 你也正在試圖重復的實例moviesController但因為你是使用Router ，你應該通過簡單的迭代controller ，將其用注射moviesController你connectOutlets 。
3. 由於顯而易見的原因，您的AJAX調用永遠不會在JSFiddle上運行：您指向的URL位於您的環境中，而JSFiddle則無法實現這一點。 我手動將數據添加到您的集合中，以便您看到正在運行的內容。

這是您的代碼的修改版本： JSFiddle Demo

編輯 ：

不像在這個問題說， 你得到的控制台錯誤：

未捕獲錯誤：<。ApplicationView：ember158> - 無法找到模板“應用程序”。

這個斷言幫助我找到了你添加腳本（把手和ember）的順序問題，因為模板名稱是正確的，這意味着它與視圖中指示的名稱相匹配，因此問題必須在其他地方。 我注意到在JSFiddle的“管理資源”選項卡中你已經在Handlebars之前加載了Ember，它產生了很大的不同。