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

Estudio de Backbone.js

MVC ⭐ 28k stars
Estructura MVC para apps SPA con modelos, binding y eventos.

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

1 · Características

Estructura de MVC
Integración con Underscore.js
Modelos con binding y eventos

2 · Casos de uso

Aplicaciones de una sola página
Apps con estructura MVC
Datos y UIs complejas

3 · Script minimalista

Instalación: npm i backbone

import Backbone from 'backbone';
const M = Backbone.Model.extend({ defaults: { nombre: '' } });
const m = new M();
m.on('change:nombre', () => console.log(m.get('nombre')));

4 · Casos de uso (implementación real)

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

1. Model con eventos

Escucha cambios en un modelo.

import Backbone from 'backbone';

const Tarea = Backbone.Model.extend({ defaults: { texto: '', ok: false } });
const t = new Tarea();
t.on('change:ok', () => console.log('Estado:', t.get('ok')));
t.set('ok', true);

🔁 Cómo funciona: `set` dispara `change:<campo>` y los listeners reaccionan.

2. View con render

Renderiza una vista y la monta en el DOM.

import Backbone from 'backbone';

const Vista = Backbone.View.extend({
  el: '#app',
  template: _.template('<h1><%= texto %></h1>'),
  initialize() { this.render(); },
  render() { this.$el.html(this.template({ texto: 'Hola Backbone' })); return this; },
});
new Vista();

🔁 Cómo funciona: La vista tiene un `el` objetivo, un template y `render` pinta el HTML.

5 · Referencia

Categoría	MVC
Stars (GitHub)	⭐ 28k
Sitio oficial	https://backbonejs.org/
GitHub	https://github.com/jashkenas/backbone
Instalación	`npm i backbone`
Relacionadas	Ember.js · Angular · Marionette.js

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