javascript - ¿Por qué no se llama mi modelo de ruta ember.js?

ajax json

Question

Acabo de empezar a aprender Ember.js (compré el screencast de PeepCode), y estoy aprendiendo bastante bien de ello, pero me encontré con un problema al intentar escribir mi primera aplicación Ember.

Aquí está el mapeo de ruta (anidado):

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

Esto permite URLs como esta: domain.com/#/yokota-ab-japan/places/4c806eabd92ea093ea2e3872

yokota-ab-japan es la identificación de una base (una base de la Fuerza Aérea en Japón) 4c806eabd92ea093ea2e3872 es la identificación de un lugar en Foursquare

Cuando se golpea la ruta de los lugares, configuro los datos con una llamada a la API, repetí sobre el JSON para crear una matriz de objetos App.Place y regreso esa matriz.

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

Eso parece funcionar bien. Expongo la matriz placesData usando esta plantilla:

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

    {{outlet}}
</script>

El enlace para enlaces al lugar individual, donde quiero mostrar más detalles sobre un lugar. Esta es la ruta que configuré para extraer datos sobre un solo lugar, rellenar un único objeto App.Place y devolverlo:

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

Mi problema es que PlaceRoute no se llama cuando el usuario hace clic en un enlace, pero se llama cuando la página se actualiza en esta ruta.

De acuerdo con el screencast PeepCode Ember.js (a ~ 12: 25 en el video), indica que "los controladores raramente hacen llamadas a datos, los objetos de ruta manejan eso", así que creo que estoy en lo correcto al poner mis llamadas ajax en el rutas (he visto tantos tutoriales diferentes en línea, pero como Peepcode consultó con los creadores de Ember.js, fui con esto como mi principal fuente de aprendizaje).

Si esto no es correcto, o podría hacerse mejor, házmelo saber.

Answer 1

Basado en la respuesta de mavilein, pero más corto y adecuado para Ember CLI con Ember Data ...

import Ember from ''ember'';

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

También tenga en cuenta que el método de búsqueda solo está disponible en Ember Data 1.0.0-beta.12.

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

Answer 2

Documentación de Ember en el gancho modelo:

"Un gancho que puede implementar para convertir la URL en el modelo para esta ruta".

Esto explica por qué el gancho modelo simplemente se llama en la página de actualización. Pero esto confunde a mucha gente :-). Entonces, este no es el gancho correcto en este caso. Creo que deberías usar el gancho setupController para este caso. Prueba esto:

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 centavos adicionales de mí mismo: ¿por qué se acaba de ejecutar el gancho modelo cuando la aplicación se ingresa a través de la URL / navegación directa del navegador?

Ember tiene la suposición de que no necesariamente hace una llamada al gancho del modelo, si usa {{linkTo}} . En su plantilla de lugares, usa {{#linkTo ''place'' place}} {{place.name}} {{/linkTo}} . Estás pasando un objeto de lugar a tu ruta. Ember supone que este es el mismo objeto que obtendría al ejecutar su gancho modelo. Por lo tanto, desde Embers View no es necesario llamar al gancho modelo. Entonces, si desea realizar una lógica de recuperación incluso cuando usa linkTo , use el setupController hook .

Answer 3

FYI:

Puedes usar el gancho modelo para este tipo de cosas, solo pasa el ID en lugar del objeto:

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

Como Ember ya no sabe qué objeto está relacionado con el ID dado, Ember se ve obligado a volver a cargar los datos (por lo que Ember llama al gancho del modelo).