理解Angular中的数据绑定

理解Angular中的数据绑定

【原文】：https://docs.angularjs.org/guide/databinding

【翻译者】：[e-mail]

 

https://docs.angularjs.org/guide/databinding 写道

Data-binding in Angular apps is the automatic synchronization of data between the model and view components. The way that Angular implements data-binding lets you treat the model as the single-source-of-truth in your application. The view is a projection of the model at all times. When the model changes, the view reflects the change, and vice versa.

 Angular 中的数据绑定是指数据在模型和视图之间的自动同步。Angular中数据绑定的实现方式让模型成了数据的唯一可靠源（靠这句话真难翻译，直译过来大部分人肯定读不明白，意思就是你只用管模型的数据，因为视图中的数据是和模型自动同步的；以前好多mvc框架中的模型和视图之间的同步是用代码实现的，搞不好就会出现模型和视图不一致的情况）。视图和模型中的数据是实时保持一致的，只要模型中数据一改变，视图中马上会显示出改变的数据，反过来也是一样。

 

-----------------------------------------------------------------------------------------------------------------------------------

 

Data Binding in Classical Template Systems

传统模板的数据绑定

 

写道

Most templating systems bind data in only one direction: they merge template and model components together into a view. After the merge occurs, changes to the model or related sections of the view are NOT automatically reflected in the view. Worse, any changes that the user makes to the view are not reflected in the model. This means that the developer has to write code that constantly syncs the view with the model and the model with the view.

  大多数模板系统的数据绑定都是单向的：直接把模板和数据组件合并后显示出视图。合并后，模板或者相关组件的数据变化不会自动在视图中反应出来。更要命的是，用户对视图中数据的修改不会反映到模型中。这意味者开发人员必须手工写出数据在模型和视图来回同步的两套代码。

 

-------------------------------------------------------------------------------------

Data Binding in Angular Templates

Angular中的数据绑定

 

写道

Angular templates work differently. First the template (which is the uncompiled HTML along with any additional markup or directives) is compiled on the browser. The compilation step produces a live view. Any changes to the view are immediately reflected in the model, and any changes in the model are propagated to the view. The model is the single-source-of-truth for the application state, greatly simplifying the programming model for the developer. You can think of the view as simply an instant projection of your model.

 Angular模板工作原理和传统模板非常不同。首先，模板是在浏览器端编译的（模板是指未编译的、包含非标准html标签和angular指令的html文档）。编译这步提供了一个活的视图，任何模型中的变化都会传播到视图中。模型是应用数据唯一的可信来源（靠又来了），这大大方便了程序员的开发。说白了，视图和模型的关系就是夫唱妇随、妇唱夫随、狼狈为奸。 

 

写道

Because the view is just a projection of the model, the controller is completely separated from the view and unaware of it. This makes testing a snap because it is easy to test your controller in isolation without the view and the related DOM/browser dependency. 

 因为视图和模型这对狗男女的关系，控制器就不需要去管视图这个婊子了，只管好这个男人就行了，反正这个男人咋干女的就咋干。这样以来，写好控制器代码后，测试工作就变得轻而易举，因为测试可以甩掉视图这个婊子和她的变态父母dom、brower了。