web-gelistirme-sc.com

emberjs - etkin menü öğesinin yönlendirici altyapısını kullanarak nasıl işaretleneceği

Gezinme sekmeleri oluşturmaya çalışıyorum ( Twitter Bootstrap 'dan alınmış):

<ul class="nav nav-tabs">
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#">Profile</a></li>
    <li><a href="#">Messages</a></li>
</ul>

Aktif sekme class="active" ile işaretlenmiştir.

http://jsfiddle.net/schawaska/pfbva/ , but .__ 'da statik navbar ve Router/Outlet özelliklerine harika bir örnek var. .

Anladığım kadarıyla, her menü maddesinde sınıf bağlama kullanmak mümkündür:

 classNameBindings: ['isActive:active']

Peki isActive niteliklerini değiştirmek için doğru yer neresidir?

51
coxx

Ember> = 1.11 kullanıyorsanız, https://stackoverflow.com/a/14501021/65542 altı doğru cevaptır.


Bir NavigationView yaratacağım, bakınız http://jsfiddle.net/pangratz666/z8ssG/ :

Gidon:

<script type="text/x-handlebars" data-template-name="navigation">
    <ul class="nav nav-tabs">
        {{#view view.NavItemView item="home" }}
            <a {{action gotoHome}} >Home</a>
        {{/view}}
        {{#view view.NavItemView item="profiles" }}
            <a {{action gotoProfiles}} >Profiles</a>
        {{/view}}
        {{#view view.NavItemView item="messages" }}
            <a {{action gotoMessages}} >Messages</a>
        {{/view}}        
    </ul>
</script>

JavaScript:

App.NavigationView = Em.View.extend({
    templateName: 'navigation',
    selectedBinding: 'controller.selected',
    NavItemView: Ember.View.extend({
        tagName: 'li',
        classNameBindings: 'isActive:active'.w(),
        isActive: function() {
            return this.get('item') === this.get('parentView.selected');
        }.property('item', 'parentView.selected').cacheable()
    })
});

Rotanızın connectOutlets içinde şu anki navigasyon öğesini router.set('navigationController.selected', 'home');… yoluyla ayarlamanız gerekir.


Ayrıca, Ember.js içindeki Bootstrap'ın bu ve daha fazla özelliğini içeren ember-bootstrap repository'ye de bakın.

26
pangratz

Köz 1.11+:

{{#link-to "dashboard" tagName="li"}}
  <a href="{{view.href}}">Dashboard</a>
{{/link-to}}

Köz <1.11 (bind-attr gerekli):

{{#link-to "dashboard" tagName="li"}}
  <a {{bind-attr href="view.href"}}>Dashboard</a>
{{/link-to}}
154
lesyk

Yukarıdaki önerilerden bazıları Twitter önyükleme durumu için hala geçerlidir. Ayrıca böyle bir şey deneyebilirsiniz

{{#link-to 'dashboard' tagName='li'}} 
  {{#link-to 'dashboard'}}Link Title{{/link-to}}
{{/link-to}}
  1. li tagName ile link-to, aktif sınıfı li'ye uygular
  2. İç link-to, sağ tıklandığında size Open in New Tab işlevini veren bir anchor öğesi olur.
17
selvagsz

Son zamanlarda sadece bunu yapmak için bir Ember-cli addon kullanıma sunuldu. Buna ember-cli-active-link-sarıcı denir.

Yükle: ember install ember-cli-active-link-wrapper

Bu şekilde kullanabilirsiniz:

{{#active-link}}
  {{link-to "Index" "index"}}
{{/active-link}}

hangi sonuçlanır:

<li class='active'>
    <a href="/" class='active'>Index</a>
</li>
10
Willem de Wit

Bunun eski bir yayın olduğunu biliyorum, ancak burada Ember 2.4.0 için güncellemeler var.

Link oluşturmak için yazabilirsiniz

{{#link-to 'photoGallery'}}
  Great Hamster Photos
{{/link-to}}

veya

{{link-to 'Great Hamster Photos' 'photoGallery'}}

Geçerli rota bağlantının rotasıyla eşleştiğinde, Ember sınıfı otomatik olarak etkin olacak şekilde ayarlayacaktır (bu örnekte photoGallery).

'Active' sınıfını diğer rotalarda da kontrol etmek istiyorsanız, current-when niteliğini ayarlayarak yapabilirsiniz.

{{#link-to 'photoGallery' current-when='photoGallery photoPreview'}}
  Great Hamster Photos
{{/link-to}}

Bu bağlantı hem active hem de photoGallery rotalarında photoPreview sınıfına sahip olacaktır.

https://github.com/emberjs/ember.js/blob/v2.4.0/packages/ember-routing-views/lib/components/link-to.js#L140

7
Ivan Bajalovic

Gidon

<ul class="nav">
    <li>{{#linkTo "index"}}Index{{/linkTo}}</li>
    <li>{{#linkTo "about"}}About{{/linkTo}}</li>
</ul>

JavaScript

App.Router.map(function() {
    this.route("about");
});

Güzergah bazında otomatik olarak aktif bir sınıf katacaktır .. Not: ember-1.0.0-pre.4.js kullanılarak test edilmiştir.

4
ketan

Bu sorunun oldukça eski olduğunu görüyorum, ancak Ember.js'yi RC3'e yükselttiyseniz, aşağıdaki gibi tagName özelliğini kullanabilirsiniz:

{{#link-to messages tagName="li"}}Messages{{/link-to}}

İşte API - http://emberjs.com/api/classes/Ember.LinkView.html

3

İsActive yöntemini şu şekilde de değiştirebilirsiniz:

isActive: function() {
    return App.getPath('router.currentState.path') === "root.firms";
}.property("App.router.currentState"),

veya

isActive: function() {
    return this.get('controller.target.currentState.path') === "root.firms";
}.property("controller.target.currentState"),
3
pjlammertyn

Çok dinamik olup olmadığından emin değilim, ancak http://codebrief.com/2012/07/anatomy-of-an-ember-dot-js-app-part-i-redux-routing-and- adresindeki çözümü görmeye çalışın satış noktaları - Ana fikir, uygulamanızın durumunu kontrol etmektir.

JavaScript:

function stateFlag(name) {
  return Ember.computed(function() {
    var state = App.router.currentState;
    while(state) {
      if(state.name === name) return true;
      state = state.get('parentState');
    }
    return false;
  }).property('App.router.currentState');
}

ApplicationController: Ember.Controller.extend({
    isHome: stateFlag('home'),
    isSections: stateFlag('sections'),
    isItems: stateFlag('items')
  })

Gidon:

<li class="home" {{bindAttr class="isHome:active"}}>
</li>
<li class="sections" {{bindAttr class="isSections:active"}}>
</li>
<li class="items" {{bindAttr class="isItems:active"}}>
</li>

Güncelleme: Pangratz'ın çözümü daha güzel görünüyor

1
zaplitny

İşte tam bir çalışma çözümü:

Görünüm:

App.NavView = Ember.View.extend({
  tagName: 'li',
  classNameBindings: ['active'],

  active: function() {
    return this.get('childViews.firstObject.active');
  }.property()
});

Şablon:

<ul>
  {{#each item in controller}}
  {{#view App.NavView}}
  {{#linkTo "item" item tagName="li"}}
      <a {{bindAttr href="view.href"}}>
        {{ item.name }}
      </a>
  {{/linkTo}}
  {{/view}}
  {{/each}}
</ul>
1
Terry

V0.8.0 ile başlayan ember-bootstrap , aktif durumun doğru bir şekilde ele alınması dahil nav'ları destekler. Ve herhangi bir link-to/tagName türü hack olmadan:

{{#bs-nav type="pills"}}
   {{#bs-nav-item}}
      {{#link-to "foo"}}Foo{{/link-to}}
   {{/bs-nav-item}}
   {{#bs-nav-item}}
     {{#link-to "bar"}}Bar{{/link-to}}
   {{/bs-nav-item}}
 {{/bs-nav}}

Bkz. Http://kaliber5.github.io/ember-bootstrap/api/classes/Components.Nav.html

0
Simon Ihmig

Burada önerilen çözümlerin çoğu, son Ember sürümlerinde (örneğin, kullanımdan kaldırılan görüşler) çalışmaz. Üstelik sadece link-to yardımcısını kullanmak sorunu çözmeyecektir, çünkü bootstrap active sınıfının <li> yerine <a>!

Bu yüzden, şu an için işe yarayan çözümleri şimdiden özetlemeye çalışacağım:

ember-cli-active-link-wrapper kullan

Ek, bu özel kullanım durumu için bir bileşen sağlar:

<ul class="nav nav-tabs">
  {{#active-link}}
    {{#link-to "foo"}}Foo{{/link-to}}
  {{/active-link}}
  {{#active-link}}
    {{#link-to "bar"}}Bar{{/link-to}}
  {{/active-link}}
</ul>

Https://stackoverflow.com/a/29939821/5556104 adresinden alınmıştır.

ember-bootstrap kullan

ember-bootstrap , bootstrap işlevselliğini ember uygulamanıza entegre eden birçok bileşen sağlar, aralarında nav bileşenleri:

{{#bs-nav type="tabs"}}
   {{#bs-nav-item}}
      {{#link-to "foo"}}Foo{{/link-to}}
   {{/bs-nav-item}}
   {{#bs-nav-item}}
      {{#link-to "bar"}}Bar{{/link-to}}
   {{/bs-nav-item}}
 {{/bs-nav}}

Https://stackoverflow.com/a/38279975/5556104 adresinden alınmıştır.

hack bağlantısı

Biraz hack, ancak herhangi bir ek addon olmadan çalışması gerekir:

<ul class="nav nav-tabs">
  {{#link-to "foo" tagName="li"}} 
    {{#link-to "foo"}}Foo{{/link-to}}
  {{/link-to}}
  {{#link-to "bar" tagName="li"}} 
    {{#link-to "bar"}}Bar{{/link-to}}
  {{/link-to}}
</ul>

Https://stackoverflow.com/a/23966652/5556104 adresinden alınmıştır.

0
Simon Ihmig

Diğer kişilerin dediği gibi, varolan bir route dosyasına bağlanmak için {{#link-to}} kullanarak, bu yol geçerli URL olduğunda, {{#link-to}} otomatik olarak CSS sınıflarına active öğesini ekleyecektir.

Bkz. Köz sayı 4387

0
Alan Dong

baijum'un yukarıdaki cevabı çoğunlukla doğrudur ancak Ember'in son sürümlerinde "bind-attr" ifadesi kullanımdan kaldırılmıştır. İşte yazmanın yeni yolu:

{{#link-to "dashboard" tagName="li"}}
    <a href="{{view.href}}">Dashboard</a>
{{/link-to}}

Gördüğünüz gibi, sihir gibi daha kolay ve daha kolay.

0
Bill Lynch

Er ya da geç, devletlerinizin ismini değiştirmek ya da koddan geçmek için neye ihtiyacınız olursa olsun, görünümü de değiştirmek için bir işlev eklemek her rotaya tercih edilmez. Benim yaklaşımım biraz daha programatik ve modüler hale geldi:

# Parent View-Tamplate, holding the navbar DOM elements
App.NavView = Ember.View.extend( 
  controller: App.NavArrayController
  templateName: "ember-nav"
)
# We Push NavItems into this array
App.NavArrayController = Ember.ArrayController.create(
  content: Ember.A([])
)
# NavItem has two settable properties and 
# an programmatic active state depending on the router
App.NavItem = Ember.Object.extend(
  title: ''
  goto: null    # <=this is the name of the state we want to go to!
  active: (->
    if App.router.currentState.name == @.get "goto"
      true
    else
      false
  ).property('App.router.currentState.name').cacheable()
)
# the actual NavElement which gets the class="active" if the 
# property "active" is true, plus a on-click binding to
# make the Router transition to this state
App.NavItemView = Ember.View.extend(
 tagName: "li"
  classNameBindings: ["active"]
  click: ->
    App.router.transitionTo(@get('goto'))
    false
)

nav-view.hbs (Twitter-bootstrap stili navs için)

<div class="nav-collapse collapse">
  <ul class="nav">
    {{#each App.NavArrayController}}
      {{#view App.NavItemView classBinding="active" gotoBinding="goto"}}
        <a href="#" {{bindAttr data-goto="goto"}}> {{title}}</a>
      {{/view}}
    {{/each}}
  </ul>
</div>

Bu şekilde, Router, .__'daki rotalarım ile sadece etrafımı yaratabilir ve etrafı dolaştırabilirim ve Nav Tanımlarını yan yana tutabilirim:

# put this somewhere close to the Router 
App.NavArrayController.pushObjects(
  [
    App.NavItem.create(
      title: 'Home'
      goto: 'home'
    ),
    App.NavItem.create(
      title: 'Chat'
      goto: 'chat'
    ),
    App.NavItem.create(
      title: 'Test'
      goto: 'test'
    )
  ]
)
0
Thomas