EmberJS - Zones de texte d'aide à la saisie de modèle

Il s'agit d'un champ de formulaire de texte multiligne dans lequel un utilisateur peut saisir un nombre illimité de caractères. La zone de texte lie la valeur du texte au contexte actuel.

Le {{textarea}} prend en charge les propriétés suivantes -

• value
• name
• rows
• cols
• placeholder
• disabled
• maxlength
• tabindex
• selectionEnd
• selectionStart
• selectionDirection
• wrap
• readonly
• autofocus
• form
• spellcheck
• required

Syntaxe

{{textarea value = name cols = "width_of_textarea" rows = "number_of_lines"}}

Exemple

L'exemple ci-dessous spécifie un contrôle de saisie de texte multiligne pour entrer un nombre illimité de caractères. Créez une route avec le nom textarea 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('textarea');
});

export default Router;

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

<h2>Input Helper Textarea</h2>
{{#link-to 'textarea'}}Click Here{{/link-to}}
{{outlet}}

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

Enter text here: <br/><br/>{{textarea value = name cols = "15" rows = "5" 
   placeholder = "Message"}}<br/>
<button {{action "send"}}>Send</button>
{{outlet}}

Ouvrez le fichier textarea.js créé sous app / routes / avec le code suivant -

import Ember from 'ember';

export default Ember.Route.extend({
   model: function () {
      return Ember.Object.create ({
         name: null
      });
   }
});

Maintenant, ouvrez le fichier textarea.js créé sous app / controllers / avec le code suivant -

import Ember from 'ember';

export default Ember.Controller.extend({
   actions: {
      send: function () {
         document.write('Entered text is: ' + this.get('name'));
      }
   }
});

Production

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

Lorsque vous cliquez sur le lien, une zone de texte s'affiche, entrez le texte et cliquez sur le bouton d'envoi -

Cliquez maintenant sur le bouton d'envoi, il affichera le résultat comme indiqué dans la capture d'écran ci-dessous -