用余烬显示崩溃路径

Question

我想用Ember展示一条崩溃的道路.如何遍历当前路径？

在我看来,有两种方法:

烬道

编辑:请参阅下面的答案

我将此问题与显示面包屑的当前状态保持同步.您可以浏览此问题的修订版以查看历史记录.

这里有几个目标:

1. 听取路线变化
2. 寻找当前路线
3. 显示当前路线的列表
4. 显示工作链接到路径中的步骤

调节器

App.ApplicationController = Ember.Controller.extend({
    needs: ['breadcrumbs'],
    currentPathDidChange: function() {
        path = this.get('currentPath');
        console.log('path changed to: ', path);
        this.get('controllers.breadcrumbs').set('content',this.get('target.router.currentHandlerInfos'));
    }.observes('currentPath')
});
App.BreadcrumbsController = Em.ArrayController.extend({});

路由器

App.ApplicationRoute = Ember.Route.extend({
    renderTemplate: function() {
        this.render();
        this.render('breadcrumbs', {
            outlet: 'breadcrumbs',
            into: 'application',
            controller: this.controllerFor('breadcrumbs')
        });
    }
});

模板

{{! application template }}
<div class="clearfix" id="content">
    {{outlet "breadcrumbs"}}
    {{outlet}}
</div>

{{! breadcrumbs template }}
<ul class="breadcrumb">
  {{#each link in content}}
    <li>
      <a {{bindAttr href="link.name"}}>{{link.name}}</a> <span class="divider">/</span>
    </li>
  {{/each}}
</ul>

目前要解决的问题是:

• 当我转到URL时:#/websites/8/pages/1面包屑的输出是:(我删除了所有脚本标记占位符

<ul class="breadcrumb">
  <li>
    <a href="application" data-bindattr-34="34">application</a> <span class="divider">/</span></li>
  <li>
    <a href="sites" data-bindattr-35="35">sites</a> <span class="divider">/</span>
  </li>
  <li>
    <a href="site" data-bindattr-36="36">site</a> <span class="divider">/</span>
  </li>
  <li>
    <a href="pages" data-bindattr-37="37">pages</a> <span class="divider">/</span>
  </li>
  <li>
    <a href="page" data-bindattr-38="38">page</a> <span class="divider">/</span>
  </li>
  <li>
    <a href="page.index" data-bindattr-39="39">page.index</a> <span class="divider">/</span>
  </li>
</ul>

• URL应该是有效的路由
• 菜单现在硬编码{{#linkTo}}到路由,我试图使动态,像这里但transitionTo不会触发currentPath-observer

另一种方法

大多数与上面相同,但有一些差异.通过循环location.hash而不是从路由器获取面包屑来制作面包屑.

在ApplicationController中变为:

ApplicationController = Ember.Controller.extend({
    needs: ['breadcrumbs'],
    hashChangeOccured: function(context) {
        var loc = context.split('/');
        var path = [];
        var prev;
        loc.forEach(function(it) {
            if (typeof prev === 'undefined') prev = it;
            else prev += ('/'+it)
            path.push(Em.Object.create({ href: prev, name: it }));
        });
        this.get('controllers.breadcrumbs').set('content',path)
    }
});
ready : function() {
    $(window).on('hashchange',function() {
        Ember.Instrumentation.instrument("hash.changeOccured", location.hash);
    });
    $(window).trigger('hashchange');
}

我们需要在ApplicationRoute中订阅自定义处理程序

App.ApplicationRoute = Ember.Route.extend({
    setupController: function(controller, model) {
        Ember.Instrumentation.subscribe("hash.changeOccured", {
            before: function(name, timestamp, payload) {
                controller.send('hashChangeOccured', payload);
            },
            after: function() {}
        });
    }
});

到目前为止,替代方法对我来说效果最好,但这不是一个好方法,因为当你配置你的路由器使用history而不是location.hash这个方法将不再工作.

Answer 1

根据您当前的面包屑输出，我猜您的路由器有错误。

以下命令应返回具有当前面包屑的数组：

App.get('Router.router.currentHandlerInfos');

你的路由器应该是嵌套的：

this.resource('page 1', function () {
    this.resource('page 2');
});

您可以使用#linkTo而不是a面包屑中的标签，您将免费获得活跃课程。