🧰 Marionette.js · Estudio ← Índice Qué es Características Casos de uso Script Casos reales Referencia

Estudio de Marionette.js

UI ⭐ 7k stars
Simplifica el código de Backbone con abstracciones para apps de gran escala.

🤖 Skill de implementación: frontend-desarrollo (regla: solo catálogo de las 66 · versiones por ERR/MEJ)

1 · Características

Simplifica la estructura de Backbone
Abstracciones para vistas y controladores
Integración con Underscore y jQuery

2 · Casos de uso

Apps Backbone de gran escala
Aplicaciones de una sola página
Mucho estado en el cliente

3 · Script minimalista

Instalación: npm i backbone.marionette

import { View } from 'backbone.marionette';
const v = new View({ el: '#app', template: () => '<h1>Hola Marionette</h1>' });
v.render();

4 · Casos de uso (implementación real)

Dos casos de uso comunes implementados con esta librería.

1. View con template

Vista Marionette que renderiza.

import { View } from 'backbone.marionette';

const v = new View({
  el: '#app',
  template: ({ nombre }) => `<h1>Hola ${nombre}</h1>`,
});
v.render();

🔁 Cómo funciona: Marionette `View` gestiona el template y el render por ti.

2. CollectionView

Renderiza una colección de ítems.

import { CollectionView, View } from 'backbone.marionette';
import { Collection } from 'backbone';

const Item = View.extend({ tagName: 'li', template: ({ n }) => n });
const Lista = CollectionView.extend({ childView: Item });

new Lista({
  el: '#lista',
  collection: new Collection([{ n: 'A' }, { n: 'B' }]),
}).render();

🔁 Cómo funciona: `CollectionView` crea un `childView` por cada modelo de la colección.

5 · Referencia

Categoría	UI
Stars (GitHub)	⭐ 7k
Sitio oficial	https://marionettejs.com/
GitHub	https://github.com/marionettejs/backbone.marionette
Instalación	`npm i backbone.marionette`
Relacionadas	Backbone.js · Ember.js · Angular

📦 Regla de librerías (local primero): revisar C:\Users\TUF\Documents\librerías\local\ antes de descargar. Volver al índice de los 66 estudios.