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

Le champ de texte fournit un champ de saisie, qui permet aux utilisateurs de saisir les données. Voici les attributs, qui peuvent être utilisés dans l'assistant d'entrée -

'lecture seulement'	'obligatoire'	'autofocus'
'valeur'	'espace réservé'	'désactivée'
'Taille'	«tabindex»	'longueur maximale'
'Nom'	'min'	«max»
'modèle'	'J'accepte'	'Saisie automatique'
"sauvegarde automatique"	'formaction'	'formenctype'
'formmethod'	«formnovalidate»	'formtarget'
'la taille'	'inputmode'	'plusieurs'
'étape'	'largeur'	'forme'
'selectionDirection'	«vérification orthographique»	'type'

Syntaxe

{{input type = "type-of-input" value = "name-of-input-element"}}

Exemple

L'exemple ci-dessous spécifie l'utilisation des champs de texte dans l'assistant d'entrée. Créez une route avec le nom comme champ de texte 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('textfield');
});

export default Router;

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

<h2>Input Helper Text Field</h2>
{{#link-to 'textfield'}}Click Here{{/link-to}}
{{outlet}}

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

Enter Name : {{input type = "text" placeholder = "Enter the name" value = name}}
<button {{action "send"}}>Send</button>
{{outlet}}

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

import Ember from 'ember';

export default Ember.Route.extend ({
   model: function () {
      //initializing the variable 'name' as null by using create method
      return Ember.Object.create ({
         name: null
      });
   }
});

Ouvrez maintenant le fichier textfield.js créé sous app / controllers / avec le code suivant -

import Ember from 'ember';

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

Production

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

Lorsque vous cliquez sur le lien, un champ de saisie s'affiche, ce qui permet aux utilisateurs de saisir les données -

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