Лучшее решение для облегчения одностороннего связывания данных

Question

У меня есть одностраничное приложение, над которым я работаю, в котором переменная x может меняться по многим причинам. Я хочу, чтобы значение, отображаемое в DOM (ниже), всегда соответствовало значению переменной javascript.

Я понимаю, что рамки, такие как угловые, хороши для этого, но я ищу более легкое и простое решение. Я уже использую JQuery и underscore.js на странице, если это помогает.

<script> 
    var x = 100 
    </script> 

    <div id="value_display">100</div> 

В идеале, мне бы хотелось, чтобы я просто хотел предоставить переменную и элемент в качестве аргументов. Например:

bind(x,'#value_display') 

Answer 1

Вы запрашиваете простую реализацию (без больших рамок) в качестве шаблона наблюдателя, в идеале, просто предоставляя имя переменного и идентификатор элемента в качестве аргументов.

Что вы можете задать, если мы определим функцию bind() для повторного опроса x, чтобы узнать, не изменилось ли оно. Обратите внимание, что затем bind должен называться так:

bind('x','value_display'); 

Рабочий пример:

var x = 100; 
 

 
function bind(varName, elementId){ 
 
    var lastValue; 
 
    function check(){ 
 
    if(lastValue !== window[varName]){ 
 
     lastValue = window[varName]; 
 
     document.getElementById(elementId).innerHTML = lastValue; 
 
    } 
 
    } 
 
    //poll for changes every 50 milliseconds 
 
    setInterval(check, 50); 
 
} 
 

 
//bind x to value_display 
 

 
bind('x','value_display'); 
 

 
//test function by changing x every 100th millisecond 
 

 
setInterval(function(){ 
 
    x = +new Date; 
 
    }, 
 
    100 
 
);

<div id="value_display"></div>

Лично я бы предпочел легкий модуль издателя/подписчика по сравнению с использованием опроса но это потребует назначения переменной x для управления функцией/методом (какой-то сеттер). Если вы исследуете (google) шаблон наблюдателя или паб/подзаголовок, вы найдете простые способы реализации этого кода гораздо меньше, чем большая структура —, но, вероятно, не такой легкий, как подход опроса.

Answer 2

Мое предложение состоит в том, чтобы создать специальный класс для инкапсуляции этих переменных. Это очень легкое решение без интервалов и внимания.

var ViewModel=function(selector){ 

    this.dom=document.querySelector(selector);//here DOM element 
    this.value=null; 

}; 

//method sets value 
ViewModel.prototype.set=function(value){ 

    if (value===this.value) 
    return;//the same value 

    this.value=value;//new value 


    this.dom.innerText=this.value; //most important changing in DOM 

}; 

//method gets value 
ViewModel.prototype.get=function(){ 

    return this.value; 

}; 

Использование:

var x=new ViewModel("#selector"); 

x.set(100); 

Проверить пример jsFiddle - https://jsfiddle.net/maciejsikora/wrd14kwk/