UNPKG

1.77 kBMarkdownView Raw
1# 起步
2
3## 引入Kero文件及相关依赖
4
5```
6<!DOCTYPE html>
7<html lang="en">
8<head>
9 <meta charset="UTF-8">
10 <title>Kero Getting Started</title>
11</head>
12<body>
13
14 <script src="http://design.yonyoucloud.com/static/jquery/jquery-1.9.1.min.js"></script>
15 <!--引入knockout依赖-->
16 <script src="http://design.yonyoucloud.com/static/knockout/knockout-3.2.0.debug.js"></script>
17 <!--引入核心js文件-->
18 <script src="http://design.yonyoucloud.com/static/uui/latest/js/u.js"></script>
19</body>
20</html>
21```
22
23## 兼容IE8
24
25如需兼容IE8,需要在引入其他JS文件之前加载`u-polyfill.js`
26
27```javascript
28<!--[if lte IE 8]>
29 <script src="http://design.yonyoucloud.com/static/uui/latest/js/u-polyfill.js"></script>
30<![endif]-->
31```
32
33## 快速上手
34
35绑定数据
36
37
38
39
40## Hello World示例
41
42
43<div class="examples-code"><pre><code>
44&lt;!-- HTML -->
45&lt;div id="demo_div">&lt;/div></code></pre>
46</div>
47
48
49<pre class="examples-code"><code>
50// JS
51var app,viewModel;
52
53/**
54 * `viewModel = {...}`创建数据模型
55 * `dt1` 创建名为`dt1`的`u.DataTable`数据集
56 * `f1` 创建名为`f1`的字段，为`dt1`数据集的一个子集
57 */
58viewModel = {
59 dt1: new u.DataTable({
60 meta:{
61 f1:{
62 type:'string',
63 maxLength:12
64 }
65 }
66 })
67};
68
69/**
70 * `app = u.createApp({...})`,页面初始化，创建框架服务
71 * `el` 指定服务对应的顶层DOM
72 * `setValue`进行赋值操作
73 */
74app = u.createApp({
75 el:'body',
76 model:viewModel
77});
78
79var r = viewModel.dt1.createEmptyRow();
80r.setValue('f1','Hello World');
81
82/**
83 * getValue 获取字段对应的值
84 */
85var demoDiv = document.getElementById('demo_div');
86var dtVal = viewModel.dt1.getValue('f1');
87demoDiv.innerHTML = dtVal;</code></pre>
88