Question

我正在使用EmberJs版本1.4，我有以下一组模板和路线。这个想法是当用户进入“Widgets”路径时，返回的模型只是Widget Ids和Widget名称的集合来创建链接，然后当用户点击链接时，对服务的调用将获得所有的选定的小部件数据将显示在“小部件”模板上。

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>

我不明白的是，为什么当我点击“Widgets”模板中的任何窗口小部件链接并显示“Widget”模板时，即使我可以看到WidgetIndexRoute上的模型钩子被执行，显示的widgetName不是硬编码的，而是在列表中选择的那个，这使我相信即使我会调用服务来获取其他数据，这些数据也不可用于模板。

另一件我不明白的是，当我调试代码时， params.widgetId 是未定义的但是当我尝试运行具有任意值的url时，所述值显示在模板上但是widgetName为空。

感谢任何帮助。

出于完整性，万一这可能与它有任何关系，两条路线都在扩展另一条路线以支持身份验证：

Awesome.AuthenticationRoute = Ember.Route.extend({
    beforeModel: function(transition){
        if(!Awesome.get('loggedUser')){
            this.redirectToLogin(transition);
        }
    },

    redirectToLogin: function(transition) {
        var loginController = this.controllerFor('awesome.login');
        loginController.set('attemptedTransition', transition);
        this.transitionTo('awesome.login');
    }
});

Answer 1

请在Ember Blog上查看this post关于Ember（1.5）的新版本：

ROUTES INHERIT MODEL

Ember路由和叶子资源（没有嵌套路由）将继承父路由的模型。

采用以下示例：

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定义模型挂钩，因为默认实现是使用父路径模型。

不明白为什么EmberJs没有从路线返回模型

1 个答案: