Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 17.02.2014, 19:38
Интересующийся
Отправить личное сообщение для Aries Посмотреть профиль Найти все сообщения от Aries
 
Регистрация: 02.02.2013
Сообщений: 26

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

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

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

var data = {
  value: ''
};

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


Интересует, как это делает ангуляр или кнокаут?
Цель вопроса - академический интерес. Хочется повысить свои знания в этом вопросе. А то что-то не нахожу доки, а ковыряться в исходниках - это уже на крайняк
Ответить с цитированием
  #2 (permalink)  
Старый 18.02.2014, 06:02
Профессор
Отправить личное сообщение для kostyanet Посмотреть профиль Найти все сообщения от kostyanet
 
Регистрация: 23.10.2010
Сообщений: 2,718

Без сведений об эшелоне прототопирования этого вашего ангуляра или что там - невозможно судить по обрывкам кода как оно может выглядеть в том самом эшелоне.
Ответить с цитированием
  #3 (permalink)  
Старый 18.02.2014, 10:31
Интересующийся
Отправить личное сообщение для Aries Посмотреть профиль Найти все сообщения от Aries
 
Регистрация: 02.02.2013
Сообщений: 26

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

Как-то же делается бинд, когда меняем объект, на лету сразу меняется дом. Вот бы хотелось узнать, как они это делают.
Ответить с цитированием
  #4 (permalink)  
Старый 18.02.2014, 10:39
Отправить личное сообщение для Octane Посмотреть профиль Найти все сообщения от Octane  
Регистрация: 10.07.2008
Сообщений: 3,873

Сделай свой AngularJS: Часть 1 — Scope и Digest
Ответить с цитированием
  #5 (permalink)  
Старый 18.02.2014, 13:31
Профессор
Отправить личное сообщение для kostyanet Посмотреть профиль Найти все сообщения от kostyanet
 
Регистрация: 23.10.2010
Сообщений: 2,718

Сообщение от Aries
Да ну, все равное же есть какие-то общие методы и подходы, что бы это реализовать.
Что реализовать? Расскажите что это такое, вдруг я знаю.
Ответить с цитированием
  #6 (permalink)  
Старый 18.02.2014, 21:29
Интересующийся
Отправить личное сообщение для Aries Посмотреть профиль Найти все сообщения от Aries
 
Регистрация: 02.02.2013
Сообщений: 26

Сообщение от kostyanet Посмотреть сообщение
Что реализовать? Расскажите что это такое, вдруг я знаю.
К примеру, хочу сделать такую штуку.

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

Код:
<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, но и для чего угодно.
Ответить с цитированием
  #7 (permalink)  
Старый 20.02.2014, 12:19
Профессор
Отправить личное сообщение для kostyanet Посмотреть профиль Найти все сообщения от kostyanet
 
Регистрация: 23.10.2010
Сообщений: 2,718

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

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

elem.dataset.attr = &val;

Как это делается в js - надо посмотреть там, про что вы задавали вопрос.
Ответить с цитированием
  #8 (permalink)  
Старый 20.02.2014, 12:34
Профессор
Отправить личное сообщение для kostyanet Посмотреть профиль Найти все сообщения от kostyanet
 
Регистрация: 23.10.2010
Сообщений: 2,718

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

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

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

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Web-разработчик ищет работу Neumann Работа 30 24.05.2013 18:59
Лексическая структура JavaScript, раскройте тему более подробно Damir Общие вопросы Javascript 7 24.03.2013 10:07
Как бы Вы это верстали? madd1 (X)HTML/CSS 19 03.08.2012 00:13
Как это реализовать на JS Bezlyj Общие вопросы Javascript 6 06.03.2012 09:20
Версия у IE 8-я, а при проверке navigator.appVersion пишет, что 7-я. Как это? jsuse Javascript под браузер 8 24.01.2012 11:21