Двухсторонний биндинг. Как это делается?

[Aries]

Собственно такой вопрос, на который не нахожу ответа. Как сделать двусторонний биндинг. По типу как делает ангуляр.

Есть элемент DOM

<input id="test" type="text" value="{{ data.value }}" />

И к примеру, есть функция

var data = {
  value: ''
};

function bindElem() {
  var el = document.getElementById('test');
  
  // Здесь делаем связывание
}
bindElem();

Интересует, как это делает ангуляр или кнокаут?
Цель вопроса - академический интерес. Хочется повысить свои знания в этом вопросе. А то что-то не нахожу доки, а ковыряться в исходниках - это уже на крайняк

[kostyanet]

Без сведений об эшелоне прототопирования этого вашего ангуляра или что там - невозможно судить по обрывкам кода как оно может выглядеть в том самом эшелоне.

[Aries]

Без сведений об эшелоне прототопирования этого вашего ангуляра или что там - невозможно судить по обрывкам кода как оно может выглядеть в том самом эшелоне.

Да ну, все равное же есть какие-то общие методы и подходы, что бы это реализовать.

Как-то же делается бинд, когда меняем объект, на лету сразу меняется дом. Вот бы хотелось узнать, как они это делают.

[Octane]

Сделай свой AngularJS: Часть 1 — Scope и Digest

[kostyanet]

Да ну, все равное же есть какие-то общие методы и подходы, что бы это реализовать.

Что реализовать? Расскажите что это такое, вдруг я знаю.

[Aries]

Что реализовать? Расскажите что это такое, вдруг я знаю.

К примеру, хочу сделать такую штуку.

Есть дом элемент.

<input type="text" id="test" test-attr="{{ data.val }}" />

Обращаем внимание на {{ data.val }}.

Далее код JS

// Глобальный объект, который будет связываться
var data = {};

(function() {
  var el = document.getElementById('test');

  data.val = 'new value';

  // Функция, которая свяжет объект и элемент (или элементы, DOM)
  MaginBindFunction(el, data);
})();

// Проверяем результат
console.log(document.getElementById('test').dataset.attr); // Show 'new value'

// Через три секунды изменим значение и оно должно так же в DOM элементе.
setTimeout(function() {
    data.val = 'change value';
    console.log(document.getElementById('test').dataset.attr); // Show 'change value'
}, 3000);

Бинд не только для атрибута data, но и для чего угодно.

[kostyanet]

Это называется reference.

Там где оно определяется явно, можно написать так

elem.dataset.attr = &val;

Как это делается в js - надо посмотреть там, про что вы задавали вопрос.

[kostyanet]

Вспомнил, в нормальном программировании это называется указатель, натурально, pointer.

И еще заметил что тут явно сеттер (ну и геттер наверно там же)

http://ejohn.org/blog/javascript-getters-and-setters/

В php магические методы давно стали каноническими.