为什么我的ember.js路径模型，被称为？ [英] Why isn't my ember.js route model being called?

问题描述

我刚开始学习Ember.js（买了窥视code截屏），并且正在学习很顺利地从它，而是试图写我的第一个灰烬的应用程序时，遇到了一个问题。

I just started learning Ember.js (bought the PeepCode screencast), and am learning quite smoothly from it, but ran into a problem when trying to write my first Ember app.

这里的（嵌套）路由映射：

Here's the (nested) route mapping:

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

这使得像这样的网址：domain.com /＃/横田-AB-日本/地/ 4c806eabd92ea093ea2e3872

This allows urls like this: domain.com/#/yokota-ab-japan/places/4c806eabd92ea093ea2e3872

横田-AB-日本是基本的ID（一个空军基地，日本） 4c806eabd92ea093ea2e3872 是四方场地的ID

yokota-ab-japan is the id of a base (an Air Force base in Japan) 4c806eabd92ea093ea2e3872 is the id of a venue on Foursquare

在地方的路线被击中，我设置了调用四方API的数据，遍历JSON创建App.Place对象的数组，并返回该数组。

When the places route is hit, I setup the data with a call to the foursquare api, iterate over the JSON to create an array of App.Place objects, and return that array.

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数组：

That seems to work well. I display the placesData array using this template:

<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对象，并返回它：

The linkTo links to the individual place, where I want to show more details about a place. Here's the route I setup to pull data about the single place, populate a single App.Place object, and return it:

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 当用户点击一个链接，它不会被调用，但是它可以调用的时候，页面刷新这个路线。

My problem is, PlaceRoute doesn't get called when the user clicks a link to it, but it does get called when the page is refreshed on this route.

据到c Ember.js截屏窥视$ C $（在〜12：25到视频），它指出，控制器很少会打电话来的数据，路由对象搞定，所以我想我是正确的在把我的ajax调用的路线（我见过这么多的网上不同的教程，但由于窥视code咨询了Ember.js创作者，我就用它作为我的主要学习的来源）。

According to the PeepCode Ember.js screencast (at ~12:25 into the video) it states that "controllers rarely ever make calls to data, route objects handle that", so I think I'm correct in putting my ajax calls in the routes (I've seen so many differing tutorials online, but since Peepcode consulted with the Ember.js creators, I went with it as my primary learning source).

如果这是不正确的，或者可以做的更好，请让我知道。

If this isn't correct, or could be done better, please let me know.

推荐答案

型号挂机灰烬文档：

钩子，你可以实现的URL转换成模型，该   路线。

"A hook you can implement to convert the URL into the model for this route."

这解释了为什么该模型挂钩只是呼吁页面刷新。但是，这混淆了很多人:-)。所以，这是不正确的钩在这种情况下。我认为你应该使用setupController挂钩这种情况。试试这个：

This explains why the model hook is just called on page refresh. But this confuses a lot of people :-). So, this is not the right hook in this case. I think you should use the setupController hook for this case. Try this:

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 /直接浏览器导航进入

Additional 2 cents from myself: Why is the model hook just executed, when the app is entered via URL/direct browser navigation?

灰烬有前提，那你不一定拨打电话到模型挂钩，如果你使用 {{linkTo}} 。在你的地方模板使用 {{＃linkTo'地方'的地方}} {{place.name}} {{/ linkTo}} 。你是传递一个地方对象添加到您的路线。 灰烬假定这是同一个对象，你会在执行模型机时得到的。因此，从余烬查看有没有必要再调用模型挂钩。所以，如果你想，当你用它来进行检索逻辑甚至 linkTo ，使用 setupController挂钩。

Ember has the assumption, that you do not necessarily make a call to the model hook, if you use {{linkTo}}. In your places template you use {{#linkTo 'place' place}} {{place.name}} {{/linkTo}}. You are passing a place object to your route. Ember assumes that this is the same object, that you would get when executing your model hook. So from Embers View there is no need to call the model hook. So if you want to perform retrieval logic even when you use linkTo, use the setupController hook.

这篇关于为什么我的ember.js路径模型，被称为？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！