Ember JS: una introducción detallada

 

 

 

  • Smart Interface Design Patterns, 10h video + UX training

  • Índice
    1. Lecturas adicionales sobre SmashingMag:
      1. Tabla de contenido
    2. Definiciones de los conceptos principales de Ember JS
      1. Modelos
      2. El enrutador
      3. Controladores
      4. Puntos de vista
      5. Componentes
      6. Plantillas
      7. Ayudantes
      8. ¿Componentes? ¿Ayudantes? ¿Puntos de vista? ¡AYUDA!
    3. Construyamos una aplicación
      1. Dibuja nuestra aplicación
      2. Lo que necesitará para comenzar
      3. Nuestra estructura de directorio de archivos
      4. ¿Precompilar plantillas o no?
      5. Configure el modelo con el FixtureAdapter de Ember-Data
      6. Crear una instancia del enrutador
      7. La plantilla de solicitud
      8. La ruta de los usuarios
      9. Objeto versus controlador de matriz
      10. Mostrar el número de usuarios
      11. Propiedades calculadas
      12. Redirigir desde la página de índice
      13. Ruta de usuario único

    Con el lanzamiento de Ember.js 1.0, ya es hora de considerar probarlo. Este artículo tiene como objetivo presentar Ember.js a los recién llegados que quieran aprender más sobre el marco. Los usuarios suelen decir que la curva de aprendizaje es pronunciada, pero una vez que se superan las dificultades, este marco es tremendo.

     

    Ember JS es un marco de JavaScript del lado del cliente para crear aspirantes a aplicaciones web de una sola página. Con el lanzamiento de Ember JS 1.0, ya es hora de considerar probarlo. Este artículo tiene como objetivo presentar Ember.js a los recién llegados que quieran aprender sobre este marco.

    Los usuarios suelen decir que la curva de aprendizaje es pronunciada, pero una vez que se superan las dificultades, Ember.js es tremendo. Esto también me pasó a mí. Si bien las guías oficiales son más precisas y están más actualizadas que nunca (¡de verdad!), esta publicación es mi intento de hacer las cosas aún más sencillas para los principiantes.

    Lecturas adicionales sobre SmashingMag:

    • Reaccione al futuro con aplicaciones isomórficas
    • Escriba su próxima aplicación web con Ember CLI
    • Una introducción a JavaScript de pila completa
    • Ponte en marcha con Grunt

    Primero, aclararemos los conceptos principales del marco. A continuación, profundizaremos con un tutorial paso a paso que le enseñará cómo crear una aplicación web sencilla con Ember.js y Ember-Data, que es la capa de almacenamiento de datos de Ember. Luego, veremos cómo viewsy componentsayudaremos a manejar las interacciones de los usuarios. Finalmente, profundizaremos un poco más en Ember-Data y la precompilación de plantillas.

    La demostración sin estilo a continuación le ayudará a seguir cada paso del tutorial. La demostración mejorada es básicamente la misma pero con mucho más CSS y animaciones y una UX totalmente responsiva cuando se muestra en pantallas pequeñas.

    Demostración sin estiloCódigo fuente Demostración mejorada

    Tabla de contenido

    • Lecturas adicionales sobre SmashingMag:
      • Tabla de contenido
    • Definiciones de los conceptos principales de Ember JS
      • Modelos
      • El enrutador
      • Controladores
      • Puntos de vista
      • Componentes
      • Plantillas
      • Ayudantes
      • ¿Componentes? ¿Ayudantes? ¿Puntos de vista? ¡AYUDA!
    • Construyamos una aplicación
      • Dibuja nuestra aplicación
      • Lo que necesitará para comenzar
      • Nuestra estructura de directorio de archivos
      • ¿Precompilar plantillas o no?
      • Configure el modelo con el FixtureAdapter de Ember-Data
      • Crear una instancia del enrutador
      • La plantilla de solicitud
      • La ruta de los usuarios
      • Objeto versus controlador de matriz
      • Mostrar el número de usuarios
      • Propiedades calculadas
      • Redirigir desde la página de índice
      • Ruta de usuario único
      • Editar un usuario
      • Nuestra primera acción
      • ¿Transición a o transición a ruta?
      • Guardar modificaciones de usuario
      • Eliminar un usuario
      • Crear un usuario
      • Formatear datos con ayudantes
      • Formatear datos con ayudas vinculadas
      • Cambie al adaptador de almacenamiento local
    • Jugando con vistas
      • jQuery y didInsertElement
      • Componentes del panel lateral con enlaces className
      • Modales con diseño y propagación de eventos
    • ¿Qué son los datos de Ember?
      • La tienda
      • Adaptadores
      • ¿Qué pasa con no utilizar Ember-Data?
    • ¿Qué es la precompilación de plantillas de manillares?
      • Convenciones de nomenclatura de plantillas
      • Precompilación con Grunt
      • Precompilación con rieles
    • Herramientas, consejos y recursos
      • Extensión Chrome Ember
      • Kit de aplicaciones de ascuas
      • Herramientas de brasa
      • Desarrollo y versión minimizada
      • Consejos de depuración
      • Comenta adecuadamente tu manillar
    • Conclusión
      • Recursos
      • Expresiones de gratitud

    Definiciones de los conceptos principales de Ember JS

    El siguiente diagrama ilustra cómo las rutas, los controladores, las vistas, las plantillas y los modelos interactúan entre sí.

     

    Definamos estos conceptos. Y si desea obtener más información, consulte la sección correspondiente de las guías oficiales:

    • Modelos
    • El enrutador
    • Controladores
    • Puntos de vista
    • Componentes
    • Plantillas
    • Ayudantes

    Modelos

    Supongamos que nuestra aplicación maneja una colección de usuarios. Bueno, esos usuarios y su información serían el modelo. Piense en ellos como datos de la base de datos. Los modelos se pueden recuperar y actualizar implementando devoluciones de llamadas AJAX dentro de sus rutas, o puede confiar en Ember-Data (una capa de abstracción de almacenamiento de datos) para simplificar enormemente la recuperación, actualización y persistencia de modelos a través de una API REST.

    El enrutador

    Está el Routery luego están las rutas. Esto Routeres solo una sinopsis de todas sus rutas. Las rutas son las representaciones URL de los objetos de su aplicación (por ejemplo, una ruta postsrepresentará una colección de publicaciones). El objetivo de las rutas es consultar el modelo, desde su modelgancho, para que esté disponible en el controlador y en la plantilla. Las rutas también se pueden utilizar para establecer propiedades en controladores, ejecutar eventos y acciones y conectar una plantilla particular a un controlador particular. Por último, pero no menos importante, el modelenlace puede devolver promesas para que puedas implementar un LoadingRoute, que esperará a que el modelo se resuelva de forma asincrónica en la red.

     

    Controladores

    Al principio, a controllerobtiene un modelo de a route. Luego, hace el puente entre el modelo y la vista o plantilla. Digamos que necesita un método o función conveniente para cambiar del modo de edición al modo normal. Un método como goIntoEditMode()y closeEditMode()sería perfecto, y eso es exactamente para lo que se pueden usar los controladores.

    Ember.js genera automáticamente los controladores si no los declara. Por ejemplo, puede crear una userplantilla con un UserRoute; y, si no crea uno UserController(porque no tiene nada especial que ver con él), Ember.js generará uno internamente (en la memoria). La extensión Ember Inspector para Chrome puede ayudarte a rastrear esos controladores mágicos.

    Puntos de vista

    Las vistas representan partes particulares de su aplicación (las partes visuales que el usuario puede ver en el navegador). A Viewestá asociada con a Controller, a Manillar templatey a Route. La diferencia entre vistas y plantillas puede ser complicada. Te encontrarás lidiando con vistas cuando quieras manejar eventos o manejar algunas interacciones personalizadas que son imposibles de manejar desde plantillas. Tienen un didInsertElementgancho muy conveniente, a través del cual puedes jugar con jQuery muy fácilmente. Además, resultan extremadamente útiles cuando necesitas crear vistas reutilizables, como modales, ventanas emergentes, selectores de fechas y campos de autocompletar.

    Componentes

    A Componentes un lugar completamente aislado Viewque no tiene acceso al contexto circundante. Es una excelente manera de crear componentes reutilizables para sus aplicaciones. Un botón de Twitter , un cuadro de selección personalizado y esos gráficos reutilizables son excelentes ejemplos de componentes. De hecho, es una idea tan genial que el W3C está trabajando con el equipo de Ember en una especificación de elemento personalizada .

    Plantillas

    En pocas palabras, una plantilla es el formato HTML de la vista. Imprime los datos del modelo y se actualiza automáticamente cuando el modelo cambia. Ember.js utiliza manillares , un motor de plantillas liviano que también mantiene el equipo de Ember. Tiene la lógica de plantillas habitual, como ify else, bucles y formato helpers, ese tipo de cosas. Las plantillas pueden estar precompiladas (si desea organizarlas limpiamente como archivos separados .hbs) .handlebarso escritas directamente en script type="text/x-handlebars"/scriptetiquetas en su página HTML. Vaya a la sección sobre precompilación de plantillas para profundizar en el tema.

    Ayudantes

    Los asistentes de manillar son funciones que modifican los datos antes de que se muestren en la pantalla; por ejemplo, para formatear las fechas mejor que Mon Jul 29 2013 13:37:39 GMT+0200 (CEST). En su plantilla, la fecha podría escribirse como {{date}}. Digamos que tienes un formatDateasistente (que convierte las fechas en algo más elegante, como "Hace un mes" o "29 de julio de 2013"). En este caso, podrías usarlo así: {{formatDatedate}}.

     

    ¿Componentes? ¿Ayudantes? ¿Puntos de vista? ¡AYUDA!

    El foro de Ember.js tiene una respuesta y StackOverflow tiene una respuesta que debería aliviar su dolor de cabeza.

    Construyamos una aplicación

    En esta sección, crearemos una aplicación real, una interfaz simple para administrar un grupo de usuarios (una aplicación CRUD ). Esto es lo que haremos:

    • mire la arquitectura que buscamos;
    • comenzar con las dependencias, la estructura de archivos, etc.;
    • configurar el modelo con Ember-Data's FixtureAdapter;
    • ver cómo interactúan entre sí rutas, controladores, vistas y plantillas;
    • finalmente, reemplace FixtureAdaptercon LSAdapterpara conservar los datos en el almacenamiento local del navegador.

    Dibuja nuestra aplicación

    Necesitamos una vista básica para representar un grupo de usuarios (ver 1 a continuación). Necesitamos una vista de usuario único para ver sus datos (2). Necesitamos poder editar y eliminar los datos de un usuario determinado (3). Finalmente, necesitamos una forma de crear un nuevo usuario; Para ello, reutilizaremos el formulario de edición.

    Ember.js se basa en gran medida en convenciones de nomenclatura. Entonces, si quieres la página /fooen tu aplicación, tendrás lo siguiente:

    • una fooplantilla,
    • a FooRoute,
    • a FooController,
    • y un FooView.

    Obtenga más información sobre las convenciones de nomenclatura de Ember en las guías.

    Lo que necesitará para comenzar

    Necesitará:

    • jQuery,
    • Ember.js en sí (obviamente),
    • Manillar (es decir, el motor de plantillas de Ember),
    • Ember-Data (es decir, la capa de abstracción de persistencia de datos de Ember).
    /* /index.html*/ … script src="https://code.jquery.com/jquery-2.0.3.min.js"/script script src="https://builds.emberjs.com/handlebars-1.0.0.js"/script script src="https://builds.emberjs.com/tags/v1.1.2/ember.js"/script script src="https://builds.emberjs.com/tags/v1.0.0-beta.3/ember-data.js"/script script // your code /script/body/html

    El sitio web de Ember tiene una sección de compilaciones , donde puede encontrar todos los enlaces para Ember JS y Ember-Data. Actualmente, Manillar no está ahí; Lo encontrarás en la web oficial de Manillar .

    Una vez que hayamos cargado las dependencias requeridas, podemos comenzar a construir nuestra aplicación. Primero, creamos un archivo llamado app.jsy luego inicializamos Ember:

    /* /app.js*/window.App = Ember.Application.create();

    Sólo para asegurarse de que todo esté bien, debería ver los registros de depuración de Ember en la consola del navegador.

    Nuestra estructura de directorio de archivos

    No existe mucha convención sobre cómo organizar archivos y carpetas. El Ember App Kit (un entorno basado en Grunt para desarrollar aplicaciones Ember) proporciona una especie de estándar para esto porque lo mantiene el equipo de Ember. Aún más sencillo, puedes poner todo en un solo app.jsarchivo. Al final, realmente depende de ti.

     

    Para este tutorial, simplemente colocaremos los controladores en una controllerscarpeta, las vistas en una viewscarpeta, etc. Blog de divulgación científica

    components/controllers/helpers/models/routes/templates/views/app.jsrouter.jsstore.js

    ¿Precompilar plantillas o no?

    Hay dos formas de declarar plantillas. La forma más sencilla es agregar scriptetiquetas especiales a su index.htmlarchivo.

    script type="text/x-handlebars" divI'm a template/div/script

    Cada vez que necesite una plantilla, deberá agregarle otra etiqueta de secuencia de comandos. Es rápido y fácil, pero puede convertirse en un verdadero desastre si tienes demasiadas plantillas.

    La otra forma es crear un archivo .hbs(o .handlebars) para cada una de sus plantillas. Esto se denomina "precompilación de plantillas" y más adelante en este artículo se le dedica una sección completa .

    Nuestra demostración sin estilo utiliza script type="text/x-handlebars"etiquetas y todas las plantillas de nuestra demostración mejorada se almacenan en .hbsarchivos precompilados con una tarea Grunt . De esta manera, puedes comparar las dos técnicas.

    Configure el modelo con el FixtureAdapter de Ember-Data

    Ember-Data es una biblioteca que le permite recuperar registros de un servidor, guardarlos en un archivo Store, actualizarlos en el navegador y, finalmente, guardarlos nuevamente en el servidor. Se Storepuede configurar con varios adaptadores (por ejemplo, interactúa RESTAdaptercon una API JSON y LSAdapterconserva sus datos en el almacenamiento local del navegador). Más adelante en este artículo se dedica una sección completa a Ember-Data.

    Aquí vamos a utilizar el FixtureAdapter. Entonces, vamos a crear una instancia:

    /* /store.js*/App.ApplicationAdapter = DS.FixtureAdapter;

    En versiones anteriores de Ember, había que subclasificar el archivo DS.Store. Ya no necesitamos hacer eso para crear instancias de adaptadores.

    Es FixtureAdapteruna excelente manera de comenzar con Ember JS y Ember-Data. Le permite trabajar con datos de muestra en la etapa de desarrollo. Al final, cambiaremos al adaptador LocalStorage (o LSAdapter).

    Definamos nuestro modelo. Un usuario tendría un name, una emaildirección, un short bio, un avatarUrly un creationDate.

    /* /models/user.js*/App.User = DS.Model.extend({ name : DS.attr(), email : DS.attr(), bio : DS.attr(), avatarUrl : DS.attr(), creationDate : DS.attr()});

    Ahora, alimentémosnos Storecon los datos de muestra. Siéntete libre de agregar tantos usuarios como necesites:

    /* /models/user.js*/App.User.FIXTURES = [{ id: 1, name: 'Sponge Bob', email: '[email protected]', bio: 'Lorem ispum dolor sit amet in voluptate fugiat nulla pariatur.', avatarUrl: 'https://jkneb.github.io/ember-crud/assets/images/avatars/sb.jpg', creationDate: 'Mon, 26 Aug 2013 20:23:43 GMT'}, { id: 2, name: 'John David', email: '[email protected]', bio: 'Lorem ispum dolor sit amet in voluptate fugiat nulla pariatur.', avatarUrl: 'https://jkneb.github.io/ember-crud/assets/images/avatars/jk.jpg', creationDate: 'Fri, 07 Aug 2013 10:10:10 GMT'}…];

    Obtenga más información sobre los modelos en la documentación .

     

    Crear una instancia del enrutador

    Definamos nuestro Routercon las rutas que queremos (según el diagrama que hicimos anteriormente ).

    /* /router.js*/App.Router.map(function(){ this.resource('users', function(){ this.resource('user', { path:'/:user_id' }, function(){ this.route('edit'); }); this.route('create'); });});

    Esto Routergenerará exactamente esto:

    URL Nombre de la ruta Controlador Ruta Plantilla
    N / A N / A ApplicationController ApplicationRoute application
    / index IndexController IndexRoute index
    N / A users UsersController UsersRoute users
    /users users.index UsersIndexController UsersIndexRoute users/index
    N / A user UserController UserRoute user
    /users/:user_id user.index UserIndexController UserIndexRoute user/index
    /users/:user_id/edit user.edit UserEditController UserEditRoute user/edit
    /users/create users.create UsersCreateController UsersCreateRoute users/create

    La :user_idparte se denomina segmento dinámico porque la ID de usuario correspondiente se inyectará en la URL. Entonces, se verá así /users/3/edit, ¿dónde 3está el usuario con el ID 3?

    Puede definir a routeo a resource. Tenga en cuenta que a resourcees un grupo de rutas y que permite anidar rutas.

    A resourcetambién restablece la convención de nomenclatura anidada al último nombre del recurso, lo que significa que, en lugar de tener UsersUserEditRoute, tendrías UserEditRoute. En otras palabras, en caso de que esto le confunda, si tiene un recurso anidado dentro de otro recurso, entonces el nombre de su archivo sería:

    • UserEditRouteen lugar de UsersUserEditRoute;
    • UserEditControleren lugar de UsersUserEditController;
    • UserEditViewen lugar de UsersUserEditView;
    • para plantillas, user/editen lugar de users/user/edit.

    Obtenga más información sobre cómo definir rutas en las guías.

     

    La plantilla de solicitud

    Cada aplicación Ember JS necesita una Applicationplantilla, con una {{outlet}}etiqueta que contiene todas las demás plantillas.

    /* /templates/application.hbs*/div h1Hello World/h1 {{outlet}}/div

    Si ha decidido seguir este tutorial sin precompilar plantillas, así es como debería index.htmlverse:

    /* /index.html*/ … script type="text/x-handlebars" div h1Hello World/h1 {{outlet}} /div /script script src="dependencies.js"/script script src="your-app.js"/script/body/html

    La ruta de los usuarios

    Esta ruta trata de nuestro grupo de usuarios. Recuerde que vimos anteriormente , en las definiciones, que una ruta es responsable de consultar el modelo. Bueno, las rutas tienen un modelgancho a través del cual puedes realizar solicitudes AJAX (para recuperar tus modelos, si no usas Ember-Data) o para consultar tus Store(si usas Ember-Data). Si estás interesado en recuperar modelos sin Ember-Data, puedes saltar a la sección en la que explico brevemente cómo hacerlo.

    Ahora, creemos nuestro UsersRoute:

    /* /routes/usersRoute.js*/App.UsersRoute = Ember.Route.extend({ model: function(){ return this.store.find('user'); }});

    Obtenga más información sobre cómo especificar el modelgancho de rutas en las guías.

    Si visita su aplicación en la URL https://localhost/#/users, no pasará nada, porque necesitamos una usersplantilla. Aquí lo tienes:

    /* /templates/users.hbs*/ul {{#each user in controller}} li{{user.name}}/li {{else}} lino users… :-(/li {{/each}}/ul

    El eachbucle itera sobre la colección de usuarios; aquí, controlleres igual UsersController. Observe que el {{#each}}bucle tiene una {{else}}declaración; entonces, si el modelo está vacío, nousers…:-(se imprimirá.

    Debido a que hemos seguido las convenciones de nomenclatura de Ember, podemos omitir la declaración del UsersController. Ember adivinará que estamos tratando con una colección porque hemos usado el plural de "usuario".

    Objeto versus controlador de matriz

    Un ObjectControllertrata con un solo objeto y un ArrayControllertrata con múltiples objetos (como una colección). Acabamos de ver que, en nuestro caso, no necesitamos declarar el ArrayController. Pero para los fines de este tutorial, vamos a declararlo para que podamos establecer algunas propiedades de clasificación:

    /* /controllers/usersController.js*/App.UsersController = Ember.ArrayController.extend({ sortProperties: ['name'], sortAscending: true // false = descending});

    Aquí, simplemente hemos ordenado a nuestros usuarios alfabéticamente. Obtenga más información sobre los controladores en las guías .

    Mostrar el número de usuarios

    Usemos UsersControllerpara crear nuestra primera propiedad calculada . Esto mostrará la cantidad de usuarios, para que podamos ver los cambios al agregar o eliminar usuarios.

     

    En la plantilla, sólo necesitamos algo tan simple como esto:

    /* /templates/users.hbs*/…divUsers: {{usersCount}}/div…

    En UsersController, declaremos la usersCountpropiedad, pero no como una propiedad normal, porque ésta será una función que devuelve la longitud del modelo.

    /* /controllers/usersController.js*/App.UsersController = Em.ArrayController.extend({ … usersCount: function(){ return this.get('model.length'); }.property('@each')});

    Básicamente, usersCounttoma el .property(‘@each’)método que le dice a Ember.js que esta función es, de hecho, una propiedad que vigila cualquier cambio en uno de los modelos de la colección (es decir, los usuarios). Más adelante veremos usersCountincrementos y decrementos a medida que creamos y eliminamos usuarios.

    Propiedades calculadas

    Las propiedades calculadas son poderosas. Te permiten declarar funciones como propiedades. Veamos cómo funcionan.

    App.Person = Ember.Object.extend({ firstName: null, lastName: null, fullName: function() { return this.get('firstName') + ' ' + this.get('lastName'); }.property('firstName', 'lastName')});var ironMan = App.Person.create({ firstName: "Tony", lastName: "Stark"});ironMan.get('fullName') // "Tony Stark"

    En este ejemplo, el Personobjeto tiene dos propiedades estáticas, que son firstNamey lastName. También tiene una fullNamepropiedad calculada, que concatena un nombre completo recuperando el valor de las dos propiedades estáticas. Tenga en cuenta que el .property(‘firstName’, ‘lastName’)método le dice a la función que se vuelva a ejecutar si firsNameo lastNamecambia.

    Las propiedades (ya sean estáticas o calculadas) se recuperan .get(‘property’)y se pueden configurar con .set(‘property’, newValue).

    Si se encuentra configurando varias propiedades consecutivamente, una mejor manera de hacerlo es con una sola instancia de .setProperties({}), en lugar de con múltiples instancias de .set(). Entonces, en lugar de hacer esto...

    this.set('propertyA', 'valueA');this.set('propertyB', valueB);this.set('propertyC', 0);this.set('propertyD', false);

    …harías esto:

    this.setProperties({ 'propertyA': 'valueA', 'propertyB': valueB, 'propertyC': 0, 'propertyD': false});

    La documentación tiene mucha más información sobre cómo vincular datos con propiedades calculadas , observadores y vinculaciones .

    Redirigir desde la página de índice

    Si va a la página de inicio de su aplicación ( https://localhost/), es posible que se pregunte por qué no sucede nada. Esto se debe a que está viendo la página de índice y no tenemos una indexplantilla. Entonces agreguemos uno. Lo llamaremos index.hbs.

    Ember.js notará que está creando la indexplantilla para IndexRoute; por lo tanto, no es necesario decirle nada más sobre el índice en el archivo Router. Esto se llama ruta inicial. Tres de ellos están disponibles: ApplicationRoute, IndexRoutey LoadingRoute. Conoce más sobre ellos en las guías .

     

    Ahora, agreguemos un enlace a la página del usuario con el {{#link-to}}…{{/link-to}}asistente de bloqueo. ¿Por qué un ayudante de bloque? Porque puedes escribir texto entre las etiquetas de apertura y cierre, como si fuera un elemento HTML personalizado real.

    /* /templates/index.hbs*/{{#link-to "users"}} Go to the users page {{/link-to}}

    Esto toma el nombre de la ruta a la que desea vincular como primer argumento (el segundo argumento opcional es un modelo). Debajo del capó, es solo un aelemento normal, aunque Ember también maneja el activenombre de la clase cuando llegamos a la ruta coincidente. Son link-toperfectos para menús de navegación. Conoce más sobre ellos en las guías .

    Otro enfoque sería indicarle IndexRouteque redirija a UsersRoute. De nuevo, bastante fácil:

    /* /routes/indexRoute.js*/App.IndexRoute = Ember.Route.extend({ redirect: function(){ this.transitionTo('users'); }});

    Ahora, cuando visite la página de inicio, será redirigido inmediatamente a la /#/usersURL.

    Ruta de usuario único

    Antes de ensuciarnos las manos con la creación del segmento dinámico, necesitamos una forma de vincularnos a cada usuario desde la usersplantilla. Usemos el {{#link-to}}asistente de bloque dentro del bucle del usuario each.

    /* /templates/users.hbs*/…{{#each user in controller}} li {{#link-to "user" user}} {{user.name}} {{/link-to}} /li{{/each}}

    El segundo argumento de link-toes el modelo al que se pasará UserRoute.

    Bien, volvamos a nuestra plantilla de usuario único. Se parece a esto:

    /* /templates/user.hbs*/div img {{bind-attr src="avatarUrl"}} alt="User's avatar" / h2{{name}}/h2 span{{email}}/span p{{bio}}/p spanCreated {{creationDate}}/span/div

    Tenga en cuenta que no puede utilizar img src="{{avatarUrl}}", porque los datos dentro de los atributos están vinculados con el bind-attrasistente. Por ejemplo, podría hacer algo como img {{bind-attr/dónde imgHeighthay una propiedad calculada en el controlador actual.

    You’ll find all you need to know about binding attributes and class names in the guides.

    So far, so good. But nothing happens when you click on the user’s links, because we told the Router that we want UserRoute to be nested in UsersRoute. So, we need an {{outlet}} in which to render the user template.

    /* /templates/users.hbs*/…{{#each user in controller}}…{{/each}}{{outlet}}

    An {{outlet}} is like a dynamic placeholder into which other templates can be injected when {{#link-to}} tags are clicked. It allows for views to be nested.

    Now, you should be able to view the user template injected in the page when visiting the page at the URL /#/users/1.

    Hey, wait a minute! We have declared neither UserRoute nor UserController, but it’s sti






    Tal vez te puede interesar:

    1. ¿Deberían abrirse los enlaces en ventanas nuevas?
    2. 24 excelentes tutoriales de AJAX
    3. 70 técnicas nuevas y útiles de AJAX y JavaScript
    4. Más de 45 excelentes recursos y repositorios de fragmentos de código

    Ember JS: una introducción detallada

    Ember JS: una introducción detallada

    Smart Interface Design Patterns, 10h video + UX training Índice Lecturas adicionales sobre SmashingMag:

    programar

    es

    https://aprendeprogramando.es/static/images/programar-ember-js-una-introduccion-detallada-830-0.jpg

    2024-05-20

     

    Ember JS: una introducción detallada
    Ember JS: una introducción detallada

    Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente

     

     

    Top 20