javascript - handlebars - Combina linkTo y ayudantes de acción en Ember.js

handlebars input

Question

Necesito combinar linkTo y action helpers en Ember.js. Mi código es:

{{#link-to ''index''}}<span {{action ''clear''}}>Clear</span>{{/link-to}}

Pero me gustaría hacer algo como esto:

{{#link-to ''index'' {{action ''clear''}} }}Clear{{/link-to}}

Y también:

<li>
    {{#link-to ''support''}}
        <span {{action ''myAction'' ''support''}}>Support</span>
    {{/link-to}}
</li>

A:

<li>
    {{#link-to ''support'' {{action ''myAction'' ''support''}} }}Support{{/link-to}}
</li>

¿Cómo puedo conseguir esto?

Solución

Verifique mi respuesta para Ember 2.0 compatible , OK para la solución de SEO .

Answer 1

Complemento Ember Link Action

Desarrollé este complemento recientemente para abordar esto con el estilo Ember 2.0 - 2.14+ compatible (¡ 1.13 también funciona! ) Y aprovechando las acciones de cierre / nombres de acción. ¡Esto está bien para SEO!

Instalar complemento

ember install ember-link-action

Uso

Puede pasar la acción de cierre como invokeAction param al componente {{link-to}} :

{{#link-to ''other-route'' invokeAction=(action ''testAction'')}}
  Link to another route
{{/link-to}}

También puede usar el nombre de la acción en lugar de la acción de cierre:

{{#link-to ''other-route'' invokeAction=''testAction''}}
  Link to another route
{{/link-to}}

Para pasar parámetros a la acción, puede usar:

{{#link-to ''other-route'' invokeAction=(action ''testAction'' param1 param2)}}
  Link to another route
{{/link-to}}

Compatibilidad

El conjunto de pruebas automatizadas confirma que el complemento funciona con 1.13 hasta las últimas versiones de Ember 3.

Funciona con versiones de lanzamiento, beta y canarias de Ember.

Addon GitHub repositorio. Las contribuciones son bienvenidas.

Answer 2

Al tener el mismo problema, encontré esta solución simple:

{{#linkTo eng.rent class="external-button"}}<div class="internal-button" {{action "updateLangPath"}} >X</div>{{/linkTo}}

luego, al administrar el botón externo de clase css y el botón interno en la hoja de estilo, me aseguré de que el "botón interno" cubría todo el área de "botón externo"; de esta manera, no es posible hacer clic en el botón externo sin hacer clic en el botón interno.

Funciona bien para mí; Espero que pueda ayudar ...

Answer 3

Así es como lo resolví en nuestra aplicación de demostración para el libro O''Reilly Ember.js: https://github.com/emberjsbook .

Puede ver la fuente completa aquí: https://github.com/emberjsbook/rocknrollcall

En la vista:

{{#if artistsIsChecked}}
  {{#if artists.length}}
    <h3>Artists</h3>

    <ul class="search-results artists">
      {{#each artists}}
        <li><a {{action ''viewedArtist'' this.enid }}>{{name}}</a></li>
      {{/each}}
    </ul>
  {{/if}}
{{/if}}

Y el controlador:

App.SearchResultsController = Em.ObjectController.extend({
  actions: {
    viewedArtist: function(enid) {
      this.transitionToRoute(''artist'', enid);
    },
    viewedSong: function(sid) {
      this.transitionToRoute(''song'', sid);
    }
  },
  needs: [''artists'', ''songs''],
  artistsIsChecked: true,
  songsIsChecked: true,
  artists: [],
  songs: []
});

Answer 4

Esto funciona bien en 1.6.0-beta.5:

<span {{action "someAction"}}>
  {{#link-to "some.route"}}
    Click Me
  {{/link-to}}
</span>

El enlace se realizará y luego el clic brillará hasta el controlador de acción. Está documentado (aunque indirectamente) here .

Editar: sintaxis corregida en la etiqueta de apertura de enlace

Answer 5

Las etiquetas de enlace de Ember usan rutas para abrir nuevas vistas, por lo que puede realizar cualquier funcionalidad que desee poner en el atributo ''acción'' del enlace en el método setupController de la ruta objetivo en lugar de en una acción del controlador.

Consulte aquí en la guía Ember: http://emberjs.com/guides/routing/setting-up-a-controller/

Esto solo funciona si desea realizar la acción cada vez que se accede a la ruta, a diferencia de con enlaces específicos.

Asegúrese de incluir el controller.set(''model'', model); línea junto con cualquier otra cosa que pongas allí.

Answer 6

Me gusta el enfoque de Cereal Killer por su simplicidad, pero lamentablemente presenta un problema para mí. Cuando el navegador navega a otra ruta, reinicia la aplicación Ember .

A partir de Ember 2.6, el siguiente enfoque simple hace el truco:

<span {{action ''closeNavigationMenu''}}> {{#link-to ''home'' preventDefault=false}} Go Home {{/link-to}} </span>

Esto logra lo siguiente:

• navega para rutear ''hogar''
• se invoca la acción ''closeNavigationMenu''
• al pasar el ratón, el navegador muestra el enlace que se seguirá (para SEO y mejor UX)
• la navegación del navegador no da como resultado el reinicio de la aplicación Ember

Answer 7

Ninguna de estas combinaciones funcionará en Ember.js, pero no necesita combinar estos dos ayudantes. ¿Por qué no usas action helper y dejas que burbujee a controlador o ruta? Allí puede usar transitionToRoute en el controlador o transitionTo en la ruta.

Por ejemplo, en el controlador podría tener un código como este:

App.PostsController = Ember.ArrayController.extend({
    clear: function () {
        // implement your action here
        this.transitionToRoute(''index'');
    }
});

Answer 8

Actualización: vea el comentario de Michael Lang a continuación para Ember 1.8.1+

El problema con la respuesta de Myslik (no usar link-to en absoluto sino usar una action y luego transitionToRoute ) es que es inútil para SEO , los robots de los motores de búsqueda no verán nada.

Si quieres que se indexe tu enlace, es más fácil tener un buen <a href=x> allí. Lo mejor es usar el link-to que las URL de tus enlaces se mantengan sincronizadas con las URL de tus rutas. La solución que uso proporciona tanto una acción para hacer el trabajo como un útil link-to para indexar las páginas.

Ember.LinkView algunas funcionalidades de Ember.LinkView :

Ember.LinkView.reopen({
  action: null,
  _invoke: function(event){
    var action = this.get(''action'');
    if(action) {
      // There was an action specified (in handlebars) so take custom action
      event.preventDefault(); // prevent the browser from following the link as normal
      if (this.bubbles === false) { event.stopPropagation(); }

      // trigger the action on the controller
      this.get(''controller'').send(action, this.get(''actionParam''));
      return false; 
    }           

    // no action to take, handle the link-to normally
    return this._super(event);
  }
});

Luego puedo especificar qué acción tomar y qué pasar la acción en los manubrios:

<span {{action ''view'' this}}>
  {{#link-to ''post'' action=''view'' actionParam=this}}
    Post Title: {{title}}
  {{/link-to}}
</span>

En el controlador:

App.PostsIndexController = Ember.ArrayController.extend({
  actions: {
    view: function(post){
      this.transitionToRoute(''post'', post);
    }
  }
}

De esta forma, cuando almaceno una copia renderizada de la página y la sirvo a un bot de indexación, el bot verá un enlace real con una URL y lo seguirá.

(Tenga en cuenta también que transitionTo ahora está en desuso en favor de transitionToRoute )