Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   Двухсторонний биндинг. Как это делается? (https://javascript.ru/forum/events/45170-dvukhstoronnijj-binding-kak-ehto-delaetsya.html)

Aries 17.02.2014 19:38

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

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

Код:

<input id="test" type="text" value="{{ data.value }}" />
И к примеру, есть функция

var data = {
  value: ''
};

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


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

kostyanet 18.02.2014 06:02

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

Aries 18.02.2014 10:31

Цитата:

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

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

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

Octane 18.02.2014 10:39

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

kostyanet 18.02.2014 13:31

Цитата:

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

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

Aries 18.02.2014 21:29

Цитата:

Сообщение от kostyanet (Сообщение 298197)
Что реализовать? Расскажите что это такое, вдруг я знаю.

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

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

Код:

<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 20.02.2014 12:19

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

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

elem.dataset.attr = &val;

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

kostyanet 20.02.2014 12:34

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

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

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

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


Часовой пояс GMT +3, время: 20:21.