Atitit. js mvc 总结(2)----angular 跟 Knockout o99 最佳实践

Atitit. js mvc 总结(2)----angular 跟 Knockout o99 最佳实践

1. 框架 angular 跟Knockout 1

2. 2. 简单的列表绑定：Knockout 1

3. foreach绑定 3

4. Sumup:hesh angular simply 3

1. Mvc优点 angular 功能包括 3

2. 2.1 数据绑定 就是MVVM 结构, 3

3. 2.10 动画效果, ng-animate 4

5. 参考 5

1. 框架 angular 跟Knockout

。有了Knockout，在写JavaScript时，就不需要在页面中引用UI元素或DOM。

　Knockout设计目标是把任何JavaScript对象当成View Model来使用。只要View Model的属性具有可监听性，就可以使用Knockout将其与UI绑定。一旦属性值发生变化时，UI会被自动刷新

作者:: 老哇的爪子 Attilax 艾龙， EMAIL:1466519819@qq.com

转载请注明来源： http://blog.csdn.net/attilax

2. 2. 简单的列表绑定：Knockout

对于列表的绑定，基本上是使用table。这里我们看如何使用ko把一个Array绑定到一个table中。因为多条数据就最好是使用模板了，所以我们结合jquery的模板插件来使用ko。

首先我们需要定义一个数组，然后定义一个ko的数组。



Ko有自己的数据定义，是availableArray;所以我们需要使用它的函数把我们定义好的数组给传进去，生成availableArray。

第二步是去定义一个jquery的模板，定义一个table,并把viewModel的数据绑定到模板中。



这里tbody的data-bind就是直接绑定template啦，对应的需要给出绑定的模板Id，以及需要传入到模板的数据源。

3. foreach绑定

　<table>

<thead>

<tr>

<td>Name</td>

<td>Amount</td>

<td>Price</td>

</tr>

</thead>

<tbody data-bind="foreach: items">

<tr>

<td data-bind="text: product.name"></td>

<td><select data-bind="options:[1,2,3,4,5,6],value: amount"></select></td>

<td data-bind="text: subTotal"></td>

</tr>

</tbody>

</table>

4. Sumup:hesh angular simply

不过foreach bind tsabdd...

文档雅十angular的多

1. Mvc优点 angular 功能包括

2. 2.1 数据绑定 就是MVVM 结构,

目的就是让开发者完全忘记操作DOM, 只需要操作数据,html页面就会自动更新

例如 var shownumber = 1, 那么你把shownumber = 2 时, 界面就自动更新了, 完全不需要用jQuery用.html()或.text()更新数据. 就这个绑定功能,目前大部分网站的js代码都能删掉 三分之二.

同时提供大量内置的ng- 开头的指令系统通过在html模板中 声明式绑定 解决操作DOM问题. (声明式指令简直就是对不懂js的前端开发的福音,再也不用js的.show(),.hide()了, 直接写到html标签上)

3. 2.10 动画效果, ng-animate

angular1.2版本后分为独立的模块 ng-animate 非常方法,只要在html写上样式名字动画自动就出来了,完全不用操心js代码

•MVVM救 星：Model将和ViewModel互动（通过$scope对象），将监听Model的变化。这些可以通过View来发送和渲染，由HTML来展示你的 代码。View可以通过$routeProvider对象来支配，所以你可以深度的链接和组织你的View和Controller，将他们变成导航 URL。AngualrJS同时提供了无状态的Controller，可以用来初始化和控制$scope对象。

要知道开源界的很多框架都是开发人员由于个人兴趣或者激情而开发出来的，比如，Cappucino 还有 Knockout。而angularJS是由互联网巨人Google组织开发的。这意味这你有更加强大的社区支持。谁都不希望第一天开始使用一个框架，第 二天发现这个框架已经被遗弃了吧！

一年前左右，接触到knockout和AngularJS，感受到数据和视图自动绑定的美妙开发体验后，立即抛弃Backbone。此时的开发已经彻底前后分离、前端业务数据层和视图层分离

你需要关心的只是数据模型的改变和真正的逻辑部分，双绑机制可以帮你完成视图层的自动更新。这也是为什么17000的代码可以变成5000的原因之一。

于AngularJS能让整个代码变得更为精简的第二原因，应该是所谓的组件化吧。这个功能是我一直不敢用也没认真去学的，因为这个功能过于强大，可以自定义HTML标签，将诸如多TAB切换这种视图层和模型层都涉及的东西，最终封装成一个新的HTML标签、非常强大，但陷阱也颇多，用起来比较吓人。...相比于AngularJS的组件，polymer的组件构造方式，较容易为初中级开发人员理解。

在一般情况下，Angular.js依靠一种叫做“ 脏检查（dirty checking）”的机制来确定对象是否已进行更改。“脏检查”的方式是，在你扫描每个对象和其所有绑定属性时，比较当前值和之前已知的值。如果它发生了变化，你就需要去更新其绑定。正如你能想到的那样，代码中对象越多，成本将越昂贵。

· 使用“脏检查”，你不需要使用accessors。你可以用person.name = "Bill"来代替person.set('name', "Bill")，就像在Ember.js 或 Backbone.js中的一样。

· 为什么在DOM中你会有这么多的对象？这最终将会成为一个瓶颈的。

Miško Hevery在StackOverflow上介绍了 这种折中方式。他指出，使用“脏检查”，你无法一次有超过2000个绑定对象。

Tom Dale（Ember.js开发者之一）所说，Ember.js受Cocoa 和Rails启发。但问题是，通过Ember.js，我并没有真正感觉到像在写一个Web应用程序，它就像一堆抛出的概念。而在Angular.js中， 我感觉像在写一个Web应用程序，它真正支持所有的Web概念，并以一种非常自然的方式来扩展HTML。

。HTML是伟大的，因为它是声明式的

· <ul>

· <li ng-repeat="element in array">element</li>

· </ul>

这个语法看起来像新的 MDV标准。这看起来比Ember.js更加简洁。另外，Angular.js被优化得非常快，开发团队通过如下措施来实现：

· 脏检查

· 只检查当前视图

· 只在变化发生时检查

· 通过和Chrome团队协作来利用JIT

5. 参考

(foreach绑定 )(Knockoutjs快速入门(经典)_Javascript教程_Java学院_希赛网.htm

KnockOutJS学习系列----(一) - Nic Pei - 博客园.htm

paip.提升效率--数据绑定到table原理和流程Angular js jquery实现 - attilax的专栏 - 博客频道 - CSDN.NET.htm