EmberJS - Campi di testo dell'helper di input del modello

Il campo di testo fornisce un campo di input, che consente agli utenti di inserire i dati. Di seguito sono riportati gli attributi che possono essere utilizzati all'interno dell'helper di input:

'sola lettura'	'necessario'	"autofocus"
'valore'	"segnaposto"	'Disabilitato'
'taglia'	"tabindex"	'lunghezza massima'
'nome'	'min'	"max"
'modello'	'accettare'	"completamento automatico"
"salvataggio automatico"	'formaction'	'formenctype'
'formmethod'	'formnovalidate'	"formtarget"
'altezza'	'Modalità di immissione'	"multiplo"
'passo'	'larghezza'	'modulo'
'selectionDirection'	'controllo ortografico'	'genere'

Sintassi

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

Esempio

L'esempio fornito di seguito specifica l'utilizzo dei campi di testo nell'helper di input. Crea una rotta con il nome come campo di testo e apri il file router.js per definire le mappature degli 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;

Apri il file application.hbs file creato in app / templates / con il seguente codice:

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

Quando fai clic sul collegamento, la pagina dovrebbe aprire il file textfield.hbs , che contiene il codice seguente:

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

Apri il file textfield.js creato in app / routes / con il seguente codice:

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

Ora apri il file textfield.js creato in app / controllers / con il seguente codice:

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

Produzione

Esegui il server ember; riceverai il seguente output -

Quando si fa clic sul collegamento, verrà visualizzato un campo di input, che consente agli utenti di inserire i dati -

Ora fai clic sul pulsante di invio, verrà visualizzato il risultato come mostrato nello screenshot qui sotto -