내 ember.js 경로 모델이 호출되지 않는 이유는 무엇입니까?

내 ember.js 경로 모델이 호출되지 않는 이유는 무엇입니까?

저는 막 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/ #/httpsota-ab-japan/places/4c806eabd92ea093ea2e3872

yokota-ab-japan기지의 id(일본 공군 기지)입니다.4c806eabd92ea093ea2e3872포스퀘어에 있는 장소의 아이디입니다.

장소 경로가 검색되면, 저는 4제곱 api에 대한 호출로 데이터를 설정하고, JSON을 통해 앱 배열을 만듭니다.개체를 배치하고 해당 배열을 반환합니다.

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.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 크리에이터와 상의한 이후로).주요 학습 자료로 사용했습니다.

만약 이것이 정확하지 않거나 더 잘 될 수 있다면, 저에게 알려주시기 바랍니다.

모델 후크에 대한 Ember 설명서:

"URL을 이 경로의 모델로 변환하기 위해 구현할 수 있는 후크."

페이지 새로 고침 시 모델 후크가 호출되는 이유를 설명합니다.하지만 이것은 많은 사람들을 혼란스럽게 합니다 :-).이 경우에는 오른쪽 훅이 아닙니다.이 경우에는 setup Controller hook을 사용해야 할 것 같습니다.사용해 보십시오.

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/직접 브라우저 탐색을 통해 앱을 입력하면 모델 후크가 실행되는 이유는 무엇입니까?

엠버는 당신이 모델 후크에 전화를 걸 필요가 없다고 가정합니다, 만약 당신이 사용한다면.{{linkTo}}사용하는 플레이스 템플리트{{#linkTo 'place' place}} {{place.name}} {{/linkTo}}플레이스 오브젝트를 경로로 전달하고 있습니다.Ember는 이것이 모델 후크를 실행할 때 얻을 수 있는 것과 동일한 개체라고 가정합니다.따라서 Embers View에서는 모델 후크를 호출할 필요가 없습니다.그래서 만약 당신이 검색 로직을 수행하기를 원한다면, 당신이 사용할 때도.linkTo을 사용합니다.setupController hook.

Ember가 모델 후크를 사용하도록 강제합니다. 개체 대신 id만 전달합니다.

{{#link-to 'place' place.id}}
    {{place.name}}
{{/link-to}}

Ember가 어떤 개체가 지정된 ID와 관련되어 있는지 더 이상 알 수 없기 때문에 Ember는 모델 후크를 호출합니다(따라서 데이터는 서버에서 로드됩니다).

Mavilein의 답변에 따르면 Ember 데이터를 사용하는 Ember CLI에 적합하지만 더 짧고 짧습니다.

import Ember from 'ember';

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

또한 가져오기 방법은 Ember Data 1.0.0-beta.12에서만 사용할 수 있습니다.

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

언급URL : https://stackoverflow.com/questions/15678817/why-isnt-my-ember-js-route-model-being-called