Por favor, trate esta questão como estritamente educacional.Eu ainda estou interessado em ouvir novas respostas e idéias para implementar este

tl; dr

Como eu implementaria a vinculação de dados bidirecional com JavaScript?

Ligação de dados ao DOM

Por ligação de dados ao DOM, quero dizer, por exemplo, ter um objeto JavaScripta com uma propriedadeb. Então tendo um<input> Elemento DOM (por exemplo), quando o elemento DOM é alteradoa alterações e vice-versa (isto é, quero dizer ligação de dados bidirecional).

Aqui está um diagrama do AngularJS sobre o que isso parece:

Então basicamente eu tenho JavaScript semelhante a:

var a = {b:3};

Em seguida, um elemento de entrada (ou outro formulário) como:

<input type='text' value=''>

Eu gostaria que o valor da entrada fossea.b's de valor (por exemplo), e quando o texto de entrada muda, eu gostariaa.b para mudar também. Quandoa.b mudanças em JavaScript, a entrada muda.

A questão

Quais são algumas técnicas básicas para conseguir isso em JavaScript simples?

Em específico, gostaria de uma boa resposta para se referir a:

Como seria o trabalho obrigatório para objetos?Como ouvir mudanças no formulário pode funcionar?É possível, de uma forma simples, apenas ter o HTML modificado no nível do modelo? Eu gostaria de não acompanhar a ligação no documento HTML em si, mas apenas em JavaScript (com eventos DOM e JavaScript mantendo referência aos elementos DOM usados).O que eu tentei?

Eu sou um grande fã de Bigode, então eu tentei usá-lo para modelar. No entanto, tive problemas ao tentar executar a vinculação de dados em si, pois o Bigode processa HTML como uma string, portanto, depois que obtenho o resultado, não faço referência a onde estão os objetos no meu viewmodel. A única solução que eu poderia pensar para isso era modificar a string HTML (ou criar a árvore DOM) com atributos. Eu não me importo de usar um motor de modelo diferente.

Basicamente, senti fortemente que estava complicando o problema e que há uma solução simples.

Nota: Por favor, não forneça respostas que usem bibliotecas externas, especialmente aquelas que são milhares de linhas de código. Eu usei (e gosto!) AngularJS e KnockoutJS. Eu realmente não quero respostas no formulário 'use framework x'. Idealmente, eu gostaria de um futuro leitor que não saiba como usar muitos frameworks para entender como implementar ele mesmo a vinculação de dados bidirecional. Eu não espero umcompleto resposta, mas um que obtém a ideia.