数据绑定,是基于事件的。我在学习Flex时初次见识。
具体应用比如:两个输入框,我在任意一个输入框中的修改都会同步影响到另一个。
如果我们使用AngularJS的话,非常容易:
- <!DOCTYPE html>
- <html ng-app><!-- 必须 -->
- <meta charset="utf-8">
- <title>AngularJS学习(二)数据绑定</title>
- <!-- 引入angularJS -->
- <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js"></script>
- <p>这里展示的是数据绑定</p>
- <!-- ng-model属性定义了一个model(模型) -->
- <input type="text" ng-model="xmodel" placeholder="输入"></input>
- <hr>
- <!-- ng-model属性定义了一个model(模型) 名字相同 指向同一个模型 -->
- <input type="text" ng-model="xmodel" placeholder="输入"></input>
- <hr>
- <!-- 双大括号里的表达式会调用model(模型)的值 -->
- Hello {{xmodel || 'World'}}!
- </html>
<!DOCTYPE html> <html ng-app><!-- 必须 --> <meta charset="utf-8"> <title>AngularJS学习(二)数据绑定</title> <!-- 引入angularJS --> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js"></script> <p>这里展示的是数据绑定</p> <!-- ng-model属性定义了一个model(模型) --> <input type="text" ng-model="xmodel" placeholder="输入"></input> <hr> <!-- ng-model属性定义了一个model(模型) 名字相同 指向同一个模型 --> <input type="text" ng-model="xmodel" placeholder="输入"></input> <hr> <!-- 双大括号里的表达式会调用model(模型)的值 --> Hello {{xmodel || 'World'}}! </html>
当然我也可以使用jQuery通过事件实现这样的效果:
- <!DOCTYPE html>
- <html>
- <meta charset="utf-8">
- <title>AngularJS学习(二)数据绑定 jQuery版</title>
- <!-- 引入jQuery -->
- <script src="http://code.jquery.com/jquery-1.9.0.min.js"></script>
- <p>这里展示的是数据绑定</p>
- <input type="text" id="txt1" placeholder="输入"></input>
- <hr>
- <input type="text" id="txt2" placeholder="输入"></input>
- <hr>
- <a href="02.html">AngularJS版</a>
- <script>
- $(function(){
- var $txt1 = $("#txt1"),
- $txt2 = $("#txt2"),
- onTxt1ChangeHandler = function(){
- $txt2.val($txt1.val());
- },
- onTxt2ChangeHandler = function(){
- $txt1.val($txt2.val());
- };
- $("#txt1").keyup(onTxt1ChangeHandler);
- $("#txt2").keyup(onTxt2ChangeHandler);
- });
- </script>
- </html>
<!DOCTYPE html> <html> <meta charset="utf-8"> <title>AngularJS学习(二)数据绑定 jQuery版</title> <!-- 引入jQuery --> <script src="http://code.jquery.com/jquery-1.9.0.min.js"></script> <p>这里展示的是数据绑定</p> <input type="text" id="txt1" placeholder="输入"></input> <hr> <input type="text" id="txt2" placeholder="输入"></input> <hr> <a href="02.html">AngularJS版</a> <script> $(function(){ var $txt1 = $("#txt1"), $txt2 = $("#txt2"), onTxt1ChangeHandler = function(){ $txt2.val($txt1.val()); }, onTxt2ChangeHandler = function(){ $txt1.val($txt2.val()); }; $("#txt1").keyup(onTxt1ChangeHandler); $("#txt2").keyup(onTxt2ChangeHandler); }); </script> </html>