AngularJS的数据双向绑定是怎么实现的

JavaScript029

AngularJS的数据双向绑定是怎么实现的,第1张

AngularJS中双向绑定的实现:

1、html中的写法:

首先使用ng-repeat将数据重复展示出来(item in datas),然后在关联的modal对话框中提供修改功能(将item的对应项使用ng-model绑在modal的form上)。

<div ng-repeat="item in data">

{{item.name}}

{{item.age}}

</div>

<a data-toggle="modal" data-target="#mySettingModal{{item.id}}" ng-click="fresh(item)">modify</a>

<div class="modal fade" id="mySettingModal{{item.id}}" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

<div class="modal-dialog" style="z-index: 1050">

<form name="form">

<div class="form-group">

<label for="name" class="control-label">名称:</label>

<input type="text" class="form-control" id="name" ng-model="item.name" />

</div>

</form>

<button type="button" class="btn btn-default" data-dismiss="modal" ng-click="reset()">Close</button>

<button type="button" class="btn btn-primary" ng-click="updateSetting(item)">Save changes</button>

</div>

</div>

2、JS的实现写法:

$http.get("/").success(function(data) {

$scope.data = data

var interItem

$scope.fresh = function(item) {

interItem = item

console.log(interItem)

}

$scope.reset = function() {

console.log(interItem)

}

})

vue的双向数据绑定大家应该很熟悉了,当一方的值发生改变时,另一方绑定的值也会随之变化,用起来是挺嗨的。

但是在原生中我们怎么使用这种机制呢?

最近有个需求是通过对接websocket获取后台服务器实时变化的值,推送给web端使用。

基于这个需求,我使用到了js中的设计模式-观察者模式。

那么,让我们来一起了解一下吧。

先来看看具体机制:

这里对象定义了四个属性,分别绑定四个函数。

1、订阅:订阅方通过传递回调函数,观察者模式把这个回调函数push到自身的订阅功能里,以此来得知谁订阅了,然后判断是否要推送。

2、退订:找到对应的回调函数,然后在自身的订阅功能里把当前函数删除掉

3、发布:循环所有的订阅方,当发布方进行发送的时候,把对应的数据推送给订阅方

4、发布订阅:定义一个对象,使其具备订阅并且发布的功能

流程是这样,说起来头头是道的,问题是怎么使用?

举个栗子:

我想定义一个对象,使其具备发布订阅功能,发布方数值改变的时候,订阅方得到平方值得变化

这里通过input框的change事件,模拟了数据的实时变更,然后把当前值进行发布,这边一发布,订阅方就能通过回调函数得到实时变化的值,然后得到值进行相应的操作。

效果:

这样就能简单实现数据变更推送功能了。

注:文件中引入的observer的js是最上面提到的观察者模式的那一套流程,tools的js大家可以不必在意,是我自己原生封装的$函数,用来获取dom元素的。

具体需求,大家还需要变通,稍作修改。

好了,以上就是js的观察者模式实现的双向数据绑定。

如有问题,请指出,接受批评。

Java键值映射是指使用Map集合,来保存Key-value的一堆组合,一个key对应一个value,可以比喻成一间房子对应着唯一的一把钥匙。

Map提供的键值映射机制,可以很好的保存各种数据,完成扩展。