Zwykłe dwukierunkowe przetwarzanie danych w języku JavaScript

z ciekawości i dla zwiększenia mojej wiedzy, chciałem zaimplementować jakieś dwukierunkowe powiązanie danych między elementami domowymi a zmiennymi javascript.Zwykłe dwukierunkowe przetwarzanie danych w języku JavaScript

Miałem szczęście znaleźć doskonałą odpowiedź na połowę mojego problemu tutaj @ stackoverflow który doprowadził mnie do tego sedna https://gist.github.com/384583, ale nadal nie mogę zrobić tego w 100%.

Oto przykład mojego kodu: http://jsfiddle.net/bpH6Z/

Jeśli próbujesz uruchomić skrzypce i kliknij „Wygląd Value” dostaniesz niezdefiniowanej, gdy chcę uzyskać rzeczywistą wartość atrybut obiektu.

Prawdopodobnie robię coś nie tak z powodu braku doświadczenia z javascript, ale czy masz jakiś pomysł, dlaczego nie mogę poprawnie odczytać atrybutu "secret" po wywołaniach _bind() i _watch()?

WYŁĄCZENIE ODPOWIEDZIALNOŚCI: jak powiedziałem, robię to, ponieważ chcę lepszą znajomość javascript, i nie zamierzam napisać mojej ramy. Tak więc każde "USE FRAMEWORK X" jest całkowicie bezużyteczne, ponieważ mogłem wykonać zadanie za pomocą angularjs.

Źródło

2012-08-10 fatmatto

+1 dla zwykłych js;) – metadings

ist $ odnosząc się do jQuery? Więc nie jest to proste JS huh – daslicht

Możliwy duplikat [Jak wdrożyć wiązanie danych DOM w JavaScript] (http://stackoverflow.com/questions/16483560/how-to-implement-dom-data-binding-in-javascript) – Beginner

Spróbuj http://jsfiddle.net/bpH6Z/4/

mam zaktualizowane przedefiniowana getter/setter w Object.prototype .__ zegarek, też obecnie swoją obsługi musi zwracać nową wartość.

Aktualizacja: teraz twój przewodnik nie musi zwracać nowo ustawionej wartości.

Aktualny kod:

//Got this great piece of code from https://gist.github.com/384583 
Object.defineProperty(Object.prototype, "__watch", { 
    enumerable: false, 
    configurable: true, 
    writable: false, 
    value: function(prop, handler) { 
     var val = this[prop], 
      getter = function() { 
       return val; 
      }, 
      setter = function(newval) { 
       val = newval; 
       handler.call(this, prop, newval); 
       return newval; 
      }; 

     if (delete this[prop]) { // can't watch constants 
      Object.defineProperty(this, prop, { 
       get: getter, 
       set: setter, 
       enumerable: true, 
       configurable: true 
      }); 
     } 
    } 
}); 

var Controller = function() { 
    //The property is changed whenever the dom element changes value 
    //TODO add a callback ? 
    this._bind = function (DOMelement, propertyName) { 
     //The next line is commented because priority is given to the model 
     //this[propertyName] = $(DOMelement).val(); 
     var _ctrl = this; 
     $(DOMelement).on("change input propertyChange", function(e) { 
      e.preventDefault(); 
      _ctrl[propertyName] = DOMelement.val(); 
     }); 

    }; 

    //The dom element changes values when the propertyName is setted 
    this._watch = function(DOMelement, propertyName) { 
     //__watch triggers when the property changes 
     this.__watch(propertyName, function(property, value) { 
      $(DOMelement).val(value); 
     }); 
    }; 
}; 

var ctrl = new Controller(); 
ctrl.secret = 'null'; 
ctrl._bind($('#text1'), 'secret'); // I want the model to reflect changes in #text1 
ctrl._watch($('#text2'), 'secret'); // I want the dom element #text2 to reflect changes in the model 
$('#button1').click(function() { 
    $('#output').html('Secret is : ' + ctrl.secret); //This gives problems 
});

Aktualny HTML:

<html> 
<head></head> 
<body> 
    value: <input type="text" id="text1" /><br /> 
    copy: <input type="text" id="text2" /><br /> 
    <input type="button" id="button1" value="View value"><br /> 
    <span id="output"></span> 
</body> 
</html>

Źródło

2012-08-10 15:03:17 metadings

+1 za przerobienie – fatmatto

Czy to działałoby z IE8, ponieważ definicjaProperty działa tylko na obiektach DOM? – Integralist

@Integralist najprawdopodobniej nie, ale należy spróbować - trzeba zrestartować do XP – metadings

Funkcja obsługi przekazana do funkcji __watch nie zawiera instrukcji return.

this._watch = function(DOMelement, propertyName) { 
    //__watch triggers when the property changes 
    this.__watch(propertyName, function(property, value) { 
     $(DOMelement).val(value); 
     return value; 
    }) 

}

Ponieważ newval jest ustawiony na co wrócił z obsługi, to będzie undefined bez tego.

Źródło

2012-08-10 15:02:56 Pointy

+1. Spotkaj się, pobij mnie do tego ... Właśnie zauważyłem to w końcu –

+1 za usunięcie mojego bólu głowy – fatmatto

I zwiększyły ją do wielu obserwatorów.

http://jsfiddle.net/liyuankui/54vE4/

//The dom element changes values when the propertyName is setted 
this._watch = function(DOMelement, propertyName) { 
    //__watch triggers when the property changes 
    if(watchList.indexOf(DOMelement)<0){ 
     watchList.push(DOMelement); 
    } 
    this.__watch(propertyName, function(property, value) { 
     for(var i=0;i<watchList.length;i++){ 
      var watch=watchList[i]; 
      $(watch).val(value); 
      $(watch).html(value); 
     } 
    }); 
};

Źródło

2014-06-18 12:05:12 lyklykkkkkkk

Zwykłe dwukierunkowe przetwarzanie danych w języku JavaScript

Odpowiedz

Powiązane problemy