29

Ember.js (PeepCode スクリーンキャストを購入) の学習を始めたばかりで、非常にスムーズに学習していますが、最初の Ember アプリを作成しようとしたときに問題が発生しました。

(ネストされた) ルート マッピングは次のとおりです。

App.Router.map(function () {
    this.resource('bases', { path: '/' }, function () {
        this.resource('base', { path: ':base_id' }, function () {
            this.resource('places', function () {
                this.resource('place', { path: ':place_id' });
            });
        });
    });
});

これにより、次のような URL が許可されます: domain.com/#/yokota-ab-japan/places/4c806eabd92ea093ea2e3872

yokota-ab-japan基地（日本の空軍基地） 4c806eabd92ea093ea2e3872のIDです はFoursquareの会場のIDです

Places ルートにヒットしたら、foursquare API を呼び出してデータをセットアップし、JSON を繰り返し処理して App.Place オブジェクトの配列を作成し、その配列を返します。

App.PlacesRoute = Ember.Route.extend({
    model: function () {
        var placesData = Ember.A();
        $.getJSON('https://api.foursquare.com/v2/venues/search?ll=35.744771,139.349456&query=ramen&client_id=nnn&client_secret=nnn&v=20120101',
            function (data) {
                $.each(data.response.venues, function (i, venues) {
                    placesData.addObject(App.Place.create({ id: venues.id, name: venues.name, lat: venues.location.lat, lng: venues.location.lng }));
                });
            });

        return placesData;
    }
});

それはうまくいくようです。このテンプレートを使用して、placesData 配列を表示します。

<script type="text/x-handlebars" data-template-name="places">
    <div>
        {{#each place in controller}}
            {{#linkTo 'place' place}}
                {{place.name}}
            {{/linkTo}}
        {{/each}}
    </div>

    {{outlet}}
</script>

linkTo場所の詳細を表示したい個々の場所へのリンク。単一の場所に関するデータを取得し、単一の App.Place オブジェクトを設定して返すように設定したルートは次のとおりです。

App.PlaceRoute = Ember.Route.extend({
    model: function (params) {
        console.log('place route called');

        var place;
        $.getJSON('https://api.foursquare.com/v2/venues/' + params.place_id + '?client_id=nnn&client_secret=nnn',
            function (data) {
                var v = data.response.venue;
                place = App.Place.create({ id: v.id, name: v.name, lat: v.location.lat, lng: v.location.lng });
            });

        return place;
    }
});

私の問題は、PlaceRouteユーザーがリンクをクリックしたときに呼び出されないことですが、このルートでページが更新されたときに呼び出されます。

PeepCode Ember.js スクリーンキャスト (ビデオの ~12:25) によると、「コントローラーがデータを呼び出すことはめったになく、ルート オブジェクトがそれを処理する」と記載されているため、ajax 呼び出しをルート (私は非常に多くの異なるチュートリアルをオンラインで見てきましたが、Peepcode が Ember.js 作成者に相談したので、私はそれを主要な学習ソースとして使用しました)。

これが正しくない場合、または改善できる場合は、お知らせください。

4

3 に答える 3

49

モデル フックに関する Ember ドキュメント:

「URL をこのルートのモデルに変換するために実装できるフック。」

これは、モデル フックがページの更新時に呼び出される理由を説明しています。しかし、これは多くの人を混乱させます:-)。したがって、この場合、これは適切なフックではありません。この場合、 setupController フックを使用する必要があると思います。これを試して：

App.PlaceRoute = Ember.Route.extend({
    setupController: function (controller, model) {
        console.log('place route called');

        var place;
        $.getJSON('https://api.foursquare.com/v2/venues/' + model.get('place_id') + '?client_id=nnn&client_secret=nnn',
            function (data) {
                var v = data.response.venue;
                place = App.Place.create({ id: v.id, name: v.name, lat: v.location.lat, lng: v.location.lng });
            });

        controller.set("model", place);
    }
});

私自身から追加の 2 セント:アプリが URL/直接ブラウザー ナビゲーションを介して入力されたときに、モデル フックが実行されたのはなぜですか?

Ember では、 を使用する場合、必ずしもモデル フックを呼び出すとは限らないという前提があります{{linkTo}}。あなたの場所のテンプレートで使用します{{#linkTo 'place' place}} {{place.name}} {{/linkTo}}。場所オブジェクトをルートに渡しています。Ember は、これがモデル フックを実行したときに取得するオブジェクトと同じであると想定します。したがって、Embers ビューからモデル フックを呼び出す必要はありません。したがって、 を使用しても取得ロジックを実行する場合はlinkTo、 を使用しsetupController hookます。

于 2013-03-28T10:12:29.527 に答える
3

mavileinの回答に基づいていますが、短く、Ember Dataを使用したEmber CLIに適しています...

import Ember from 'ember';

export default Ember.Route.extend({
  setupController: function( controller, model ) {
    controller.set( "model", this.store.fetch( 'place', model.id ) );
  },
});

また、fetch メソッドは Ember Data 1.0.0-beta.12 からのみ使用できることに注意してください。

http://emberjs.com/api/data/classes/DS.Store.html#method_fetch

于 2014-12-05T17:26:40.163 に答える