Düz Javascript çift yönlü Veri bağlama

meraktan ve bilgimi artırmak için, dom elemanları ve javascript değişkenleri arasında bir tür iki yönlü veri bağlayıcı uygulamak istedim. Düz Javascript çift yönlü Veri bağlama

bu özü https://gist.github.com/384583 götürdü @ stackoverflow burada sorunun yarısına mükemmel bir cevap bulmak için şanslıydım, ama yine de bir şey% 100 halletmek mümkün değil. i gerçek değerini elde etmek isterken, sen keman çalıştırın ve "görünümü Değeri" tıklayın çalışırsanız http://jsfiddle.net/bpH6Z/

Eğer tanımsız açılır: Burada

kodumu bir örnek nesnenin özniteliği.

Muhtemelen javascript ile ilgili deneyim eksikliği nedeniyle yanlış bir şeyler yapıyorum, ancak _bind() ve _watch() çağrılarından sonra neden 'secret' özelliğini düzgün okuyamadığımı biliyor musunuz?

REDDİ: Dediğim gibi ben javascript daha bilgili istedikleri için ben yapıyorum ve benim çerçeveyi yazmak için gitmiyorum. Yani herhangi bir "KULLANIM ÇERÇEVESİ X" tamamen işe yaramaz, çünkü iş angularjs ile yapılabiliyordu.

kaynak

2012-08-10 fatmatto

+1 ;) – metadings

ist $ jQuery atıfta? Bu yüzden düz bir JS ha – daslicht

Olası yinelenen değil (http://stackoverflow.com/questions/16483560/how-to-implement-dom-data-binding-in-javascript) – Beginner

http://jsfiddle.net/bpH6Z/4/

Ben Object.prototype .__ seyretmek içinde yeniden tanımlandı alıcı/ayarlayıcı güncelledik, da şu anda işleyicisi yeni bir değer döndürmek gerekiyor deneyin.

Güncelleme: Artık işleyicinizin yeni ayarlanan değere geri dönmesi gerekmiyor.

Güncel kodu:

//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 
});

Güncel 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>

kaynak

2012-08-10 15:03:17 metadings

1 kaldırmak için bu nihayet çok – fatmatto

benim baş ağrısı – Integralist

@Integralist büyük olasılıkla değil, ama bir denemelisiniz - xp yeniden başlatmak zorunda – metadings

__watch işlevinize ilettiğiniz işleyici return ifadesinde eksik. newval işleyicisi döndü ne ayarlandığında

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

}

Çünkü o olmadan undefined olacak.

kaynak

2012-08-10 15:02:56 Pointy

[DOM Veri JavaScript Bağlama Nasıl Uygulanmalı?] +1. beni alt, Spot on ... Sadece defineProperty olarak IE8 ile bu iş sadece DOM nesneler üzerinde çalışır misiniz rework –

1 fark? – fatmatto

ben çok gözlemcileri için arttırmıştır. Düz js için

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); 
     } 
    }); 
};

kaynak

2014-06-18 12:05:12 lyklykkkkkkk

Düz Javascript çift yönlü Veri bağlama

cevap

İlgili konular