EmberJS - Template link-to comme assistant en ligne

Vous pouvez utiliser le lien vers comme composant en ligne en fournissant le texte du lien comme premier argument de l'assistant.

Syntaxe

Click for {{#link-to 'link1'}}more info{{/link-to}},
info of {{link-to 'link text' 'link2'}}.

Exemple

L'exemple donné ci-dessous montre l'utilisation de link-to en tant que composant en ligne en spécifiant le premier argument de l'assistant. Créez deux routes avec les noms comme info et enregistrez et ouvrez le fichier router.js pour définir les mappages d'URL -

import Ember from 'ember';
import config from './config/environment';

const Router = Ember.Router.extend ({
   location: config.locationType,
   rootURL: config.rootURL
});

Router.map(function() {
   this.route('info');
   this.route('record');
});

export default Router;

Ouvrez le fichier fichier application.hbs créé sous app / templates / avec le code suivant -

Click for the {{#link-to 'info'}}Fruits{{/link-to}} information, for the documentation 
{{link-to 'Click for records''record'}}
{{outlet}}

Lorsque vous cliquez sur le lien "Fruits", la page doit ouvrir le fichier info.hbs qui contient le code suivant -

<p>Some Fruits</p>
<ul>
   <li>Orange</li>
   <li>Banana</li>
</ul>
{{outlet}}

Si vous cliquez sur le lien Click for records , la page doit ouvrir le fichier record.hbs qui contient le code suivant -

<p>Some Records</p>
<ul>
   <li>Orange.doc</li>
   <li>Banana.doc</li>
</ul>
{{outlet}}

Production

Exécutez le serveur de braises; vous recevrez la sortie suivante -

Lorsque vous cliquez sur les informations , il affichera le texte ci-dessous à partir du fichier modèle -

Lorsque vous cliquez sur Click for records , il affichera le texte ci-dessous à partir du fichier modèle -