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

Estudio de Knockout.js

UI ⭐ 10k stars
UIs con enlace de datos declarativo y dependencias automáticas.

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

1 · Características

2 · Casos de uso

3 · Script minimalista

Instalación: npm i knockout

import ko from 'knockout';
const vm = { nombre: ko.observable('Mundo') };
ko.applyBindings(vm);

4 · Casos de uso (implementación real)

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

1. Observable + click

Un contador con click.

import ko from 'knockout';

const vm = { contador: ko.observable(0), incrementar: () => vm.contador(vm.contador() + 1) };
ko.applyBindings(vm);
// HTML: <button data-bind="click: incrementar">+1</button>
//       <span data-bind="text: contador"></span>
🔁 Cómo funciona: `ko.observable` es reactivo y `data-bind` conecta la UI con el viewmodel.

2. foreach

Renderiza una lista.

import ko from 'knockout';

const vm = { items: ko.observableArray(['A', 'B', 'C']) };
ko.applyBindings(vm);
// HTML: <ul data-bind="foreach: items"><li data-bind="text: $data"></li></ul>
🔁 Cómo funciona: `observableArray` + `foreach` actualizan la lista cuando cambia el array.

5 · Referencia

CategoríaUI
Stars (GitHub)⭐ 10k
Sitio oficialhttps://knockoutjs.com/
GitHubhttps://github.com/knockout/knockout
Instalaciónnpm i knockout
RelacionadasVue.js · Angular · React.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.