所以,这基本上就是我想要的。但我需要获得我在ember检查器中可以看到的当前路径,但是如何在组件中获取它?或者有更好的方法吗? 也许一项服务?
import Ember from 'ember';
var inject = Ember.inject;
// maybe rewrite nav link one of these options?
// http://discuss.emberjs.com/t/best-practice-for-a-dynamic-menu-bar/9094
export default Ember.Component.extend({
currentUser: inject.service('current-user'),
actions: {
logout: function () {
console.log('header logout');
this.get('currentUser').logout();
}
},
didInsertElement: function() {
// get current router path to implement if statements on header navigation
if(path==='search-results'){
jQuery('.showSearchButton').show();
} else {
jQuery('.showSearchButton').hide();
}
}
});
<div id="header" class="header navbar navbar-default navbar-fixed-top" data-state-change="disabled">
<!-- begin container -->
<div class="container-fluid">
<!-- begin navbar-header -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#header-navbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<button type="button" class="showSearchButton navbar-search collapsed" onclick="jQuery('.collapse.navbar-collapse.in').collapse('hide');" data-toggle="collapse" data-target="#search-navbar">
<i class="fa fa-search"></i>
</button>
<img src="assets/images/logo.png" alt="Logo">
{{/link-to}}
</div>
<!-- end navbar-header -->
<!-- begin navbar-collapse -->
<div class="collapse navbar-collapse navbar-right" id="header-navbar">
<ul class="nav navbar-nav">
{{#if currentUser.logged}}
{{#if currentUser.hasDashboardPermissions}}
{{#nav-link-to 'dashboard.list' data-toggle='collapse' data-target='#header-navbar'}}Admin{{/nav-link-to}}
{{/if}}
{{#nav-link-to 'user.profile' data-toggle='collapse' data-target='#header-navbar'}}Account{{/nav-link-to}}
<li><a href="#" {{action 'logout' on="click"}}>Log Out</a></li>
{{else}}
{{#nav-link-to 'auth.register' class='reg' data-toggle='collapse' data-target='#header-navbar'}}Register{{/nav-link-to}}
{{#nav-link-to 'auth.login' data-toggle='collapse' data-target='#header-navbar'}}Login{{/nav-link-to}}
{{/if}}
</ul>
<ul class="nav navbar-nav visible-xs">
<li role="separator" class="divider"></li>
{{#nav-link-to 'about' data-toggle='collapse' data-target='#header-navbar'}}About{{/nav-link-to}}
{{#nav-link-to 'how-it-works' data-toggle='collapse' data-target='#header-navbar'}}How it works{{/nav-link-to}}
{{#nav-link-to 'terms-of-service' data-toggle='collapse' data-target='#header-navbar'}}Terms of Service{{/nav-link-to}}
{{#nav-link-to 'support' data-toggle='collapse' data-target='#header-navbar'}}Support{{/nav-link-to}}
{{#nav-link-to 'contact-us' data-toggle='collapse' data-target='#header-navbar'}}Contact Us{{/nav-link-to}}
</ul>
</div>
<!-- end navbar-collapse -->
<div class="collapse navbar-collapse" id="search-navbar">
{{find-it header=true withSearch=withSearch class='inhead' inHeader=true}}
</div>
</div>
<!-- end container -->
</div>
答案 0 :(得分:1)
&LT; Ember 2.3
this.get('container').lookup('controller:application').currentPath;
Ember 2.3或更高版本
import Ember from 'ember';
const { getOwner } = Ember;
export default Ember.Component.Extend({
...
currentPath: Ember.computed(function() {
return getOwner(this).lookup('controller:application').currentPath;
}),
...
});