Estudio de Ember.js

• Arquitectura MVC
• Enrutado integrado
• Gestión del estado de la aplicación

• Apps web de gran escala
• Aplicaciones de una sola página
• Requisitos de estado complejos

Instalación: npx ember-cli@latest new

// app/components/hola.js
export default class Hola extends Component {
  get saludo() { return 'Hola Ember'; }
}

1. Componente con @tracked

Estado reactivo en un componente.

// app/components/saludo.js
import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';

export default class Saludo extends Component {
  @tracked contador = 0;
}

// template: <button {{on "click" this.incrementar}}>...</button>

2. Ruta con template

Modelo de una ruta pintado en su template.

// app/routes/inicio.js
export default class InicioRoute extends Route {
  model() { return [{ id: 1, nombre: 'Ana' }, { id: 2, nombre: 'Luis' }]; }
}

// app/templates/inicio.hbs
// {{#each @model as |u|}} <li>{{u.nombre}}</li> {{/each}}