कोशिश http://jsfiddle.net/bpH6Z/4/
मैं Object.prototype .__ घड़ी में अपने नए सिरे से परिभाषित गेटर/सेटर को नवीनीकृत किया है, भी वर्तमान में आपके हैंडलर नई मूल्य वापस करने की जरूरत है कृपया।
अपडेट: अब आपके हैंडलर को नए सेट वैल्यू को वापस करने की आवश्यकता नहीं है।
वर्तमान कोड:
//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
});
वर्तमान 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>
+1 सादा जे एस के लिए;) – metadings
IST $ jQuery की चर्चा करते हुए? तो यह सादा जेएस हुह – daslicht
संभावित डुप्लिकेट [जावास्क्रिप्ट में डोम डेटा बाइंडिंग को कार्यान्वित करने के लिए कैसे करें] (http://stackoverflow.com/questions/16483560/how-to-implement-dom-data-binding-in-javascript) – Beginner