A melhor solução para ligação de dados unidirecional leve [fechada]

9

Eu tenho um aplicativo de página única no qual estou trabalhando, no qual uma variável x pode ser alterada por vários motivos. Eu quero que o valor exibido no DOM (o div abaixo) para em todos os momentos corresponder ao valor da variável javascript.

Eu entendo que frameworks como o angular são bons para isso, mas eu estou procurando uma solução mais leve e simples. Eu já estou usando JQuery e underscore.js na página, se isso ajuda.

 <script>
    var x = 100
    </script>

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

Idealmente, gostaria de algo em que eu precisasse fornecer a variável e o elemento como argumentos. Por exemplo:

bind(x,'#value_display')
    
por corycorycory 26.08.2016 в 16:15
fonte

2 respostas

3

Minha proposição é criar uma classe especial para encapsular essas variáveis. É muito leve solução sem intervalos e valor assistindo.

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;

};

Uso:

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

x.set(100);

Verifique o exemplo no jsFiddle - link

    
por Maciej Sikora 01.09.2016 / 22:30
fonte
0

Você solicita uma implementação simples (sem grandes estruturas) de um padrão de observador, idealmente apenas fornecendo o nome da variável e o id do elemento como argumentos.

O que você pede é possível, se definirmos a função bind() para pesquisar repetidamente x para ver se ela foi alterada. Note que bind tem que ser chamado assim:

bind('x','value_display');

Um exemplo de trabalho:

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>
Pessoalmente, eu preferiria um módulo leve de editor / assinante sobre o uso de uma função de pesquisa, mas isso exigiria a atribuição à variável x a ser controlada por uma função / método (algum tipo de setter). Se você pesquisar padrão de observador (google) ou padrão pub / sub, encontrará maneiras fáceis de implementar isso em código muito menor do que uma estrutura grande - mas provavelmente não tão leve quanto a abordagem de pesquisa.

    
por Tomas Langkaas 01.09.2016 / 21:38
fonte