Freewind @ Thoughtworks scala java javascript dart 工具 编程实践 月结 math python english [comments admin] [feed]

(2013-01-01) 21. Angular中的数据绑定

广告: 云梯:翻墙vpn (省10元) 土行孙:科研用户翻墙http proxy (有优惠)


https://github.com/angular/angular.js/blob/master/docs/content/guide/dev_guide.templates.databinding.ngdoc

Angular web程序中的数据绑定可自动将model和view间的数据同步。Angular实现数据绑定的方式,可以让我们把model当作程序中唯一可信的数据来源。view始终是model的投影。当model发生变化时,会自动反映到view上,反之亦然。

经典模板系统中的数据绑定

image

大多数模板系统中的数据绑定都是单向的:它们把模板与model合并在一起变成view,如上图所示。如果在合并之后,model发生了变化,不会自动反映到view上。更糟的是,用户在view上的交互也不会反映到model中。这表示开发者必须写大量代码不断地在view与model之间同步数据。

Anguar模板中的数据绑定

image

Angular模板的工作方式不同,与上图所示。它们之所以不同,是因为,首先模板(由HTML和附加的markup和directive组成)是在浏览器中编译的,其次,在编译阶段产生了一个实时更新(live)的视图。我们说它是“live"是因为不论在model或是view上发生了变化,都会立刻反映到对方。这样让model成为程序中唯一真实的数据来源,极大地简化了开发者需要处理的编程模型。你可以认为view是model的实时投影。

由于view只是投影,controller完全与view分开,完全无视它的存在。这样让测试很容易,因为它让你的controller在一个与DOM/浏览器无关的独立状态下进行测试。

comments powered by Disqus