ember.js ember-old-router

ember.js - emberjs: cómo marcar el elemento del menú activo usando la infraestructura del enrutador



ember-old-router (15)

Intento crear pestañas de navegación (tomadas de Twitter Bootstrap ):

<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>

La pestaña activa está marcada con class="active" .

Hay un gran ejemplo de la barra de navegación estática y la función Enrutador / Salida en http://jsfiddle.net/schawaska/pfbva/ , pero no puedo entender cómo crear una vista dinámica de navegación / menú / pestaña.

Por lo que yo entiendo, es posible usar enlaces de clase en cada elemento del menú:

classNameBindings: [''isActive:active'']

Pero, ¿dónde está el lugar correcto para cambiar los atributos isActive?

Algunas de las sugerencias anteriores siguen siendo válidas para el caso de bootstrap de twitter. También puedes probar algo como esto

{{#link-to ''dashboard'' tagName=''li''}} {{#link-to ''dashboard''}}Link Title{{/link-to}} {{/link-to}}

  1. El link-to con li tagName aplica la clase activa al li
  2. El link-to interno sería un elemento de anchor que le da la función Open in New Tab al hacer clic derecho

Aquí hay una solución de trabajo completa:

Ver:

App.NavView = Ember.View.extend({ tagName: ''li'', classNameBindings: [''active''], active: function() { return this.get(''childViews.firstObject.active''); }.property() });

Modelo:

<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>

Bigote daliniano

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

Javascript

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

Agregará la clase activa automáticamente según la ruta. Nota: se prueba usando ember-1.0.0-pre.4.js

Como dijeron otras personas, usando {{#link-to}} para vincular a una route existente, cuando esa ruta es la URL actual, {{#link-to}} agregará automáticamente active a sus clases de CSS.

Ver Ember issue 4387

Ember 1.11+:

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

Ember <1.11 ( bind-attr requiere bind-attr ):

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

La respuesta de Baijum arriba es correcta, sin embargo, en las últimas versiones de Ember, el "bind-attr" está en desuso. Aquí está la nueva forma de escribirlo:

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

Como pueden ver, es aún más fácil y funciona como magia.

Muchas de las soluciones propuestas aquí no funcionan para ninguna versión reciente de Ember (por ejemplo, las vistas están en desuso). Además, el solo hecho de usar el link-to ayudar no resolverá el problema, ya que bootstrap espera que la clase active esté presente en el <li> no en <a> .

Así que intentaré resumir las soluciones que de hecho funcionan a partir de ahora:

utilizar ember-cli-active-link-wrapper

El complemento proporciona un componente para este caso de uso especial:

<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>

Tomado de https://.com/a/29939821/5556104

usar ember-bootstrap

ember-bootstrap proporciona muchos componentes que integran la funcionalidad de arranque en tu aplicación Ember, entre ellos los componentes de navegación:

{{#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}}

Tomado de https://.com/a/38279975/5556104

enlace a Hack

Algo hacky, pero debería funcionar sin ningún complemento adicional:

<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>

Tomado de https://.com/a/23966652/5556104

No estoy seguro de si es muy dinámico, pero intente ver la solución en http://codebrief.com/2012/07/anatomy-of-an-ember-dot-js-app-part-i-redux-routing-and-outlets/ La idea principal es verificar el estado de tu aplicación

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'') })

Bigote daliniano:

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

Actualización: la solución de pangratz parece más bonita

Recientemente, un complemento Ember-cli estuvo disponible para hacer esto. Se llama ember-cli-active-link-wrapper .

Instalar: ember install ember-cli-active-link-wrapper

Puedes usarlo así:

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

lo que resulta en:

<li class=''active''> <a href="/" class=''active''>Index</a> </li>

Sé que esta es una publicación anterior, pero aquí hay actualizaciones para Ember 2.4.0

Para crear enlaces puedes escribir

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

o

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

Ember establecerá automáticamente la clase en activa cuando la ruta actual coincida con la ruta del enlace (en este ejemplo, photoGallery ).

Si también desea controlar la clase ''activa'' en otras rutas, puede hacerlo configurando el atributo current-when .

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

Este enlace tendrá active clase active en ambas rutas, photoGallery y photoPreview .

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

Si usa Ember> = 1.11, https://.com/a/14501021/65542 continuación es la respuesta correcta.

Crearía una NavigationView , mira http://jsfiddle.net/pangratz666/z8ssG/ :

Manubrios :

<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() }) });

Y dentro de connectOutlets su ruta, connectOutlets establecer el elemento de navegación actual a través de router.set(''navigationController.selected'', ''home''); ...

También eche un vistazo al repositorio ember-bootstrap , que envuelve esto y más características de Bootstrap dentro de Ember.js

También puede cambiar el método isActive en algo como esto:

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

o

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

Tarde o temprano quiere cambiar el nombre de sus estados o lo que sea que tenga que pasar por el código Y también la vista, y también agregar una función a la transición. A cada ruta le parece no deseable. Mi enfoque es un poco más programático y modular:

# 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 (para nav-twitter-bootstrap-style)

<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>

De esta forma, puedo crear y jugar con mis rutas en el Enrutador y mantener las Definiciones de navegación una al lado de la otra:

# 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'' ) ] )

Veo que esta pregunta es bastante antigua, pero si actualizaste Ember.js al RC3, puedes usar la propiedad tagName , como:

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

Aquí está la API - http://emberjs.com/api/classes/Ember.LinkView.html