Ember.js 不理解为什么EmberJs不从路由返回模型

我使用的是EmberJs版本1.4，我有以下一组模板和路由。其思想是，当用户转到“小部件”路径时，返回的模型只是小部件ID和小部件名称的集合，以创建链接，然后当用户单击链接时，对服务的调用将获得所有选定的小部件数据，以显示在“小部件”模板上

JavaScript代码

window.Awesome = Ember.Application.create();

Awesome.Router.map(function() {
    this.resource("awesome", {path: "/"}, function(){
        this.route('login');
    });
    this.resource("widgets", function () {
        this.resource('widget', { path: '/:widgetId' }, function () {
            this.route('general', { path: 'info' });
            this.route('configuration');
            this.route('operations');
        })
    });
});


Awesome.WidgetsRoute = Awesome.AuthenticationRoute.extend({
    model: function(){
        //TODO: Call a service to get the model.
        return { widgets: [{ widgetId: 1, widgetName: "Great Widget" }, { widgetId: 2, widgetName: "Fantastic Widget" }, { widgetId: 3, widgetName: "Brutal Widget" }] };
    }
});

Awesome.WidgetIndexRoute = Awesome.AuthenticationRoute.extend({
    model: function (params) {
        var receivedWidgetId = params.widgetId;
        return { widgetName: "Hardcoded Widget", widgetId: receivedWidgetId };
    }
});

车把模板

<script type="text/x-handlebars" data-template-name="widgets">
    <section class="span3 left-section">
        <div class="btn-group-vertical btn-group-justified registration-actions-menu">
            <button id="createNewWidget" class="btn btn-link">Create New Widget</button>
            <button id="joinWidgetTeam" class="btn btn-link">Join Widget Team</button>
        </div>
        <div class="registered-widgets-menu">
            <div class="btn-group-vertical">
                {{#each widget in widgets}}
                    {{#link-to 'widget' widget class="btn btn-link"}}{{widget.widgetName}}{{/link-to}}
                {{/each}}
            </div>
        </div>
    </section>
    <section class="span8">
        {{outlet}}
    </section>
</script>

<script type="text/x-handlebars" data-template-name="widget">
    <div id="widgetOptions">
        <!-- TODO: Change the anchors for handlebars link-to helpers. -->
        <h1>{{widgetName}}</h1> <h5>{{widgetId}}</h5>
        <ul id="widgetNavigation">
            <li><a href="#">Widget Info</a></li>
            <li><a href="#">Widget Configuration</a></li>
            <li><a href="#">Widget Operations</a></li>
        </ul>
    </div>
    <div id="widgetContent">
        <!-- TODO: Design some awesome widget content. -->
        Some awesome widget content
    </div>
</script>

请访问Ember博客了解新版本的Ember（1.5）：

路由继承模型

余烬路由和叶资源（无嵌套路由）将继承父路由的模型

以以下为例：

App.Router.map(function(){
  this.resource('post', function(){
    this.route('edit');
  });
});

App.PostRoute = Ember.Route.extend({
  model: function(){
    return {title: 'ZOMG', text: 'AWESOME'};
  }
});

App.PostEditRoute = Ember.Route.extend({
  model: function(){
    return this.modelFor('post');
  }
});

---

现在在1.5中，您不必为PostEditRoute定义模型钩子，因为默认实现是使用父路由模型。

这并不能真正回答问题，这并不是我真正需要的，因为在Widgets资源上，我只需要一个名称和ID列表来创建链接，而在Widget资源上，我最终将获得所有链接所选小部件的id信息。本示例的目的是在我在项目中使用它之前，了解和理解Ember是如何工作的。我使用的是1.4版

App.Router.map(function(){
  this.resource('post', function(){
    this.route('edit');
  });
});

App.PostRoute = Ember.Route.extend({
  model: function(){
    return {title: 'ZOMG', text: 'AWESOME'};
  }
});

App.PostEditRoute = Ember.Route.extend({
  model: function(){
    return this.modelFor('post');
  }
});