Question

我正在使用EmberJs版本1.4。

当我点击其中一个链接时，我希望URL包含所选小部件的ID，但什么也没有出现，当我查看路径模型钩子中的params参数时，它没有属性，我希望id成为其中一个属性所以有人可以帮我理解我错过了什么？

换句话说，我希望网址变为 awesome.html＃/ widgets / 5 ，但它总是 awesome.html＃/ widgets

谢谢！

这是我的余烬代码：

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>

我还有一个身份验证路由，其他路由继承。虽然我不相信它与这个问题有关，但我会包括以防我错了。

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

当你点击其中一个小工具时，它似乎完全对我有用

http://emberjs.jsbin.com/mohex/1

此外，您似乎正在混淆WidgetIndexRoute和WidgetRoute。 widget资源应该像这样显示（尽管这与您正在描述的问题无关）

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

单击该路由的链接时，为什么URL未更新

1 个答案: