Proszę traktować to pytanie jako ściśle edukacyjne.Nadal jestem zainteresowany wysłuchaniem nowych odpowiedzi i pomysłów na wdrożenie tego

tl; dr

Jak zaimplementować dwukierunkowe wiązanie danych z JavaScriptem?

Powiązanie danych z DOM

Przez powiązanie danych z DOMem mam na przykład posiadanie obiektu JavaScripta z nieruchomościąb. Potem mam<input> Element DOM (na przykład), gdy zmienia się element DOM,a zmiany i odwrotnie (tzn. mam na myśli powiązanie danych dwukierunkowych).

Oto diagram z AngularJS na temat tego, jak to wygląda:

Więc zasadniczo mam JavaScript podobny do:

var a = {b:3};

Następnie element wejściowy (lub inny) taki jak:

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

Chciałbym, aby wartość wejścia byłaa.bwartość (na przykład) i kiedy tekst wejściowy się zmieni, chciałbyma.b zmienić też. Gdya.b zmiany w JavaScript, zmiany danych wejściowych.

Pytanie

Jakie są podstawowe techniki, aby to osiągnąć w prostym JavaScript?

W szczególności chciałbym uzyskać dobrą odpowiedź na pytanie:

W jaki sposób wiązanie działałoby na przedmioty?Jak może działać słuchanie zmian w formularzu?Czy można w prosty sposób zmodyfikować tylko HTML na poziomie szablonu? Nie chciałbym śledzić powiązania w samym dokumencie HTML, ale tylko w JavaScript (ze zdarzeniami DOM i JavaScriptem odwołującym się do używanych elementów DOM).Co próbowałem?

Jestem wielkim fanem Mustache, więc spróbowałem go użyć do szablonowania. Jednak podczas próby wykonania powiązania danych natrafiłem na problemy, ponieważ Mustache przetwarza HTML jako łańcuch, więc po otrzymaniu jego wyniku nie mam odniesienia do tego, gdzie znajdują się obiekty w moim modelu widoku. Jedynym sposobem obejścia tego problemu było zmodyfikowanie łańcucha HTML (lub utworzonego drzewa DOM) za pomocą atrybutów. Nie mam nic przeciwko używaniu innego silnika szablonów.

Zasadniczo mam silne wrażenie, że komplikuję problem i jest proste rozwiązanie.

Uwaga: Nie podawaj odpowiedzi, które używają zewnętrznych bibliotek, zwłaszcza tych, które są tysiącami linii kodu. Użyłem (i lubię!) AngularJS i KnockoutJS. Naprawdę nie chcę odpowiedzi w postaci „use framework x”. Optymalnie chciałbym, aby przyszły czytelnik, który nie wie, jak używać wielu frameworków, aby zrozumieć, jak zaimplementować dwukierunkowe wiązanie danych. Nie oczekujękompletny odpowiedz, ale taka, która wpłynie na pomysł.