EmberJS - Campos de texto del asistente de entrada de plantillas

El campo de texto proporciona un campo de entrada, que permite a los usuarios ingresar los datos. Los siguientes son los atributos, que se pueden usar dentro del asistente de entrada:

'solo lectura'	'necesario'	'enfoque automático'
'valor'	'marcador de posición'	'discapacitado'
'Talla'	'tabindex'	'longitud máxima'
'nombre'	'min'	'max'
'patrón'	'aceptar'	'autocompletar'
'autoguardado'	'formacion'	'formenctype'
'método de forma'	'formnovalidate'	'formtarget'
'altura'	'modo de entrada'	'múltiple'
'paso'	'anchura'	'formar'
'selectionDirection'	'corrector ortográfico'	'tipo'

Sintaxis

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

Ejemplo

El ejemplo que se muestra a continuación especifica el uso de campos de texto en el asistente de entrada. Cree una ruta con el nombre como campo de texto y abra el archivo router.js para definir las asignaciones de 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;

Abra el archivo application.hbs creado en app / templates / con el siguiente código:

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

Al hacer clic en el enlace, la página debería abrir el archivo textfield.hbs , que contiene el siguiente código:

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

Abra el archivo textfield.js creado en app / routes / con el siguiente código:

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

Ahora abra el archivo textfield.js creado en app / controllers / con el siguiente código:

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

Salida

Ejecute el servidor ember; recibirá el siguiente resultado:

Cuando hace clic en el enlace, se mostrará un campo de entrada, que permite a los usuarios ingresar los datos:

Ahora haga clic en el botón enviar, mostrará el resultado como se muestra en la captura de pantalla a continuación:

↰ Previous page