平原Javascript双向数据绑定

出于好奇，为了增加我的知识，我想在dom元素和javascript变量之间实现某种双向数据绑定。平原Javascript双向数据绑定

我很幸运地找到了一个很好的答案，我的一半问题在这里@ stackoverflow，导致我这个要点https://gist.github.com/384583，但我仍然无法完成100％的事情。

这里是我的代码的例如： http://jsfiddle.net/bpH6Z/

如果您尝试运行小提琴，然后点击“浏览价值”，你会得到不确定，而我想要得到的实际值对象的属性。

由于我对javascript的使用经验不足，我可能做错了什么，但是你有什么想法，为什么在_bind（）和_watch（）调用之后我无法正确读取属性'secret'？

免责声明：正如我所说，我这样做是因为我想要更好的JavaScript知识，而且我不打算写我的框架。所以任何“使用FRAMEWORK X”都是无用的，因为我可以用angularjs完成工作。

来源

2012-08-10 fatmatto

+1纯JS） – metadings 2012-08-10 15:16:46

IST $指的是jQuery的？所以它不是普通的JS huh – daslicht 2014-09-02 15:56:04

[如何在JavaScript中实现DOM数据绑定]可能的重复（http://stackoverflow.com/questions/16483560/how-to-implement-dom-data-binding-in-javascript） – Beginner 2015-12-29 14:50:29

请尝试http://jsfiddle.net/bpH6Z/4/

我已经更新了你的重新定义的getter/setter中的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>

来源

2012-08-10 15:03:17 metadings

+1为返工 – fatmatto 2012-08-10 15:14:11

将这项工作与IE8作为defineProperty只适用于DOM对象？ – Integralist 2013-08-18 16:54:47

@Integralist最有可能不是，但一个应该试试看 - 必须重新启动到XP – metadings 2013-08-18 19:18:38

您传递给您的__watch函数的处理程序缺少return语句。

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

}

因为newval设置什么从处理程序返回的年代，这将是undefined没有说。

来源

2012-08-10 15:02:56 Pointy

+1。点击，击败我吧...我只是最后注意到了这一点 – 2012-08-10 15:05:35

+1为了消除我的头痛 – fatmatto 2012-08-10 15:15:59

我增强了其多观察。

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

来源

2014-06-18 12:05:12 lyklykkkkkkk

平原Javascript双向数据绑定

回答

相关问题