1 | # Kero依赖
|
2 |
|
3 | 通过设计使程序模块化,做到模块内部的高聚合和模块之间的低耦合,这是引入设计模式的优点,实现了View层和数据层的分离。
|
4 |
|
5 | Kero的模型层以knockout为基础来做数据的双向绑定,数据模型也是以knockout为核心,构建出来的多维数据模型。
|
6 |
|
7 | ## 选用Knockout
|
8 |
|
9 | 在项目中,我们做数据分离,需要满足以下基本需求:
|
10 |
|
11 | * 实现需求:数据双向绑定
|
12 | * 版本支持:支持低版本浏览器(如:ie8)
|
13 | * 轻量:原生无依赖
|
14 |
|
15 | 以上,Knockout都做了很好的支持:
|
16 |
|
17 | * 高效简洁的双向绑定
|
18 | * 浏览器支持友好:ie6及以上
|
19 | * 原生javascript
|
20 | * 紧凑:gzip压缩后13kb
|
21 |
|
22 | ## Ko实现数据绑定
|
23 |
|
24 |
|
25 |
|
26 |
|
27 | <div class="example-content">
|
28 | <p>First name: <input data-bind="value: firstName" /></p>
|
29 | <p>Last name: <input data-bind="value: lastName" /></p>
|
30 | <h2>Hello, <span data-bind="text: fullName"> </span>!</h2></div>
|
31 | <div class="example-content ex-hide"><script>// 定义ViewModel
|
32 | var ViewModel = function(first, last) {
|
33 | // ko.observable可实时监听数据,实现绑定
|
34 | this.firstName = ko.observable(first);
|
35 | this.lastName = ko.observable(last);
|
36 |
|
37 | this.fullName = ko.pureComputed(function() {
|
38 | // ko.pureComputed用于执行计算,实时返回改变后的结果
|
39 | return this.firstName() + " " + this.lastName();
|
40 | }, this);
|
41 | };
|
42 |
|
43 | ko.applyBindings(new ViewModel("Planet", "Earth")); // 通过ko.applyBindings执行knockout
|
44 | </script></div>
|
45 | <div class="examples-code"><pre><code><!-- ko通过data-bind绑定数据 -->
|
46 | <p>First name: <input data-bind="value: firstName" /></p>
|
47 | <p>Last name: <input data-bind="value: lastName" /></p>
|
48 | <h2>Hello, <span data-bind="text: fullName"> </span>!</h2></code></pre>
|
49 | </div>
|
50 | <div class="examples-code"><pre><code>// 定义ViewModel
|
51 | var ViewModel = function(first, last) {
|
52 | // ko.observable可实时监听数据,实现绑定
|
53 | this.firstName = ko.observable(first);
|
54 | this.lastName = ko.observable(last);
|
55 |
|
56 | this.fullName = ko.pureComputed(function() {
|
57 | // ko.pureComputed用于执行计算,实时返回改变后的结果
|
58 | return this.firstName() + " " + this.lastName();
|
59 | }, this);
|
60 | };
|
61 |
|
62 | ko.applyBindings(new ViewModel("Planet", "Earth")); // 通过ko.applyBindings执行knockout</code></pre>
|
63 | </div>
|
64 |
|
65 |
|
66 | ## Ko学习
|
67 | 了解基本的Knockout可查看由刘绍振同学写的[Knockout入门](https://github.com/iuap-design/blog/issues/26),涵盖了绑定常用的API。
|
68 |
|
69 | Ko的官网除了提供[Live examples](http://knockoutjs.com/examples/),还提供了交互式学习的[快速入门](http://learn.knockoutjs.com/),很容易轻松上手。
|
70 |
|
71 | ## 其他Ko学习资料
|
72 |
|
73 | - 中文文档下载:[KnockoutJS.chm](http://design.yyuap.com/dist/static/handbook/KnockoutJS.chm)
|
74 | (如果有下载打不开,请进行如下操作。)
|
75 | * 先关闭文件,右键点击文件--》选择“属性”
|
76 |
|
77 | ![](../../static/img/kero/ko1.png)
|
78 |
|
79 | * 点击“解除锁定”,重新打开就可以了
|
80 |
|
81 | ![](../../static/img/kero/ko2.png)
|
82 | |
\ | No newline at end of file |