3

絶え間なく変化する 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/

テンプレートは正しく読み込まれ、"Application" ヘッダーと "Movie List" ヘッダーは表示されますが、順序付けされていないリストにはデータが表示されません。

コンソールにエラーは表示されず、XML 要求は適切に返されます。App.movi​​esController.content と入力すると、API からのデータが含まれているように見える「クラス」の配列が取得されます。

誰でも考えやガイダンスを提供できますか?

4

1 に答える 1

5

スクリプトにいくつかの問題があります

  1. ライブラリをロードする順序: Ember はハンドルバーに依存するため、 Ember の前にロードする必要があります。順番を変えました。
  2. 複数の{{action}}コンテキストをサポートするためにヘルパーが変更されました:こちらをお読みください。また、のインスタンスを反復しようとしていますmoviesControllerが、使用しているため、注入されRouterた を単純に反復する必要があります。controllermoviesControllerconnectOutlets
  3. AJAX 呼び出しは、明らかな理由で JSFiddle では機能しません。指している URL は環境にあり、JSFiddle からはそれをヒットできません。コレクションに手動でデータを追加したので、何かが実行されていることがわかります。

コードの修正版は次のとおりです: JSFiddle Demo

編集：

質問に記載されているのとは異なり、コンソールでエラーが発生します。

キャッチされないエラー: <.ApplicationView:ember158> - テンプレート「アプリケーション」が見つかりません。

このアサーションは、スクリプト (ハンドルバーと ember) を追加した順序の問題を見つけるのに役立ちました。テンプレート名が正しかったためです。つまり、ビューに示されている名前と一致していたため、問題は別の場所にあるはずでした。JSFiddle の [Manage Resources] タブで、Handlebars の前に Ember がロードされていることに気付きました。これは大きな違いです。

于 2012-08-12T05:59:05.973 に答える