FazBrowse GitHub Viewer | Trending |
URL:
| Home
Tools: [Download Repo ZIP]   [Original HTTPS Page]

add $get · httpsa/guide@b7909b8 · GitHub

  1. httpsa
  2. guide

Repository navigation

Commit b7909b8

Browse files
leeluolee
committed
add $get
1 parent 3738df7 commit b7909b8

6 files changed

Lines changed: 334 additions & 14 deletions

File tree

‎en/core/binding.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -130,7 +130,7 @@ component.$update() // do nothing , just enter digest phase
130130
131131

132132
<a name="get"></a>
133-
### 5 `component.$get(expr)`
133+
### 4 `component.$get(expr)`
134134

135135
Instated of using `data.*` to access property directly, you can also pass a `Expression` to get the evaluated value.
136136

‎en/introduct/index.md‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -25,12 +25,12 @@ This page aims at helping you to find all the api in this guide
2525
1. [component.$watch](../core/binding.html#watch) create a watcher
2626
2. [component.$unwatch](../core/binding.html#unwatch): destroy a watcher
2727
3. [component.$update](../core/binding.html#update): update data and enter the digest phase
28-
3. [component.$get](../core/binding.html#get): update data and enter the digest phase
29-
4. [component.$bind](../core/binding.html#bind) create binding between two component
30-
5. [component.$on](../core/message.html#on) Listens on events of a given type
31-
6. [component.$off](../core/message.html#off) remove Listener with given type
32-
7. [component.$emit](../core/message.html#emit) trigger Listener
33-
8. [component.$inject](../getting-start/quirk-example.html#$inject) $inject component to the specified place
28+
4. [component.$get](../core/binding.html#get): eval a expression and get its value.
29+
5. [component.$bind](../core/binding.html#bind) create binding between two component
30+
6. [component.$on](../core/message.html#on) Listens on events of a given type
31+
7. [component.$off](../core/message.html#off) remove Listener with given type
32+
8. [component.$emit](../core/message.html#emit) trigger Listener
33+
9. [component.$inject](../getting-start/quirk-example.html#$inject) $inject component to the specified place
3434

3535

3636
# Builtin

‎zh/core/binding.md‎

Lines changed: 29 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -130,8 +130,36 @@ component.$update() // do nothing , just enter digest phase
130130
> <h5>Warning: </h5>
131131
> 无论传入什么参数，运行$update之后都会进行组件作用域内的dirty-check
132132
133+
<a name="get"></a>
134+
### 4 `component.$get(expr)`
135+
136+
137+
除了直接操作数据对象`data` 去获取值， 你也可以使用`$get`去获取表达式的值，这个相当于angular的`$eval`，__`$get`的出现主要是为了获取[计算属性的值](computed.md)__
138+
139+
140+
__Exmaple__
141+
142+
143+
```javascript
144+
var component = new Regular({
145+
data: {items: [1,2,3]},
146+
computed: {
147+
computedLength: "items.length"
148+
}
149+
});
150+
151+
component.$get("items.length"); //=== 3
152+
component.$get("computedLength"); //=== 3
153+
154+
```
155+
156+
> 由于为了ie8的支持，你目前无法直接使用data.computedLength的方式来获取计算属性。（不过未来可能会发布一个更友好的版本来去掉ie8-的支持）;
157+
158+
159+
160+
133161
<a name="bind"></a>
134-
### 2.5 `component.$bind(component2, expr1[, expr2])`
162+
### 5 `component.$bind(component2, expr1[, expr2])`
135163

136164
与另一个组件实现双向绑定
137165

‎zh/core/binding.md~‎

Lines changed: 226 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,226 @@
1+
#数据绑定和生命周期
2+
3+
regularjs 推崇极致的数据驱动的组件开发, 而其中数据绑定是实现数据驱动的组件开发的核心所在.
4+
5+
regularjs的组件实例中与数据绑定相关的函数有如下几个
6+
7+
8+
<a name="watch"></a>
9+
### 1 `component.$watch(expression, handler)`
10+
11+
绑定一个数据监听器, 返回watchid，用于$unwatch(解绑)
12+
13+
14+
__Arguments__
15+
16+
* expression [Expression| Array | String] - expression可以有多种参数类型
17+
- Expression: 每次都会检查此表达式求值是否改变
18+
- String: 此字符串会先被`Regular.expression`处理为Expression
19+
- Array: 即检查多个表达式，数组中的任意一个发生改变都触发回调
20+
* handler(newvalue, oldvalue) [Function] - 监听器回调，传入改变前和改变后的值
21+
- newvalue: current value of the Expression
22+
- oldvalue: previous value of the Expression
23+
24+
25+
__注__: 当为多重监听时， 参数为所有表达式的新值列表
26+
27+
28+
__Example__
29+
30+
```javascript
31+
var component = new Regular();
32+
33+
34+
var expression = Regular.expression('c + d');
35+
component.$watch(expression, function(nvalue, oldvalue){alert('c + d is changed to' + nvalue );
36+
})
37+
38+
var watchid = component.$watch('a + b', function(nvalue,oldvalue){
39+
alert('a + b=' + nvalue );
40+
})
41+
42+
component.$watch(['a + b', expression], function(a_add_b, c_add_d){
43+
alert('a + b, c + d is changed' );
44+
})
45+
46+
47+
component.$update(function(data){
48+
data.a = 1;
49+
data.b = 4;
50+
data.c = 1;
51+
data.d = 4;
52+
})
53+
54+
```
55+
56+
57+
`$update`请参考[$update](#update);
58+
59+
60+
61+
<a name="unwatch"></a>
62+
### 2 `component.$unwatch(watchid)`
63+
64+
取消一个数据监听器
65+
66+
__Arguments__
67+
68+
* watchid [Number] - `$watch`返回的watchid
69+
70+
71+
__Example__
72+
73+
74+
```javascript
75+
76+
var component = new Regular();
77+
78+
component.$watch('b', function(b){
79+
alert('b watcher 1');
80+
})
81+
82+
var id = component.$watch('b', function(){
83+
alert('b watcher 2');
84+
})
85+
86+
component.$unwatch(id);
87+
component.$update('b', 100); // only watcher 1 alert;
88+
89+
```
90+
91+
92+
<a name="update"></a>
93+
### 3 `component.$update(setable, value)`
94+
95+
设值函数, 设值之后会进入组件的digest阶段，即脏检查
96+
97+
__Arguments__
98+
99+
* setable [Expression| Function | String] - expression可以有多种参数类型
100+
- String: 此字符串会先被Regular.expression处理为Expression
101+
- Expression: 此expression需要有set函数, [查看Expression](../syntax/expression.md)
102+
- Function: , 类似于angular的$apply, 传入setable的参数如下
103+
- data: 即组件的数据模型`component.data`
104+
105+
* value - 设置的值，如果expression参数为Function，则被忽略
106+
107+
```javascript
108+
109+
var component = new Regular();
110+
111+
component.$update('a.b', 2); // component.data.a.b = 2;
112+
113+
component.$update('a + b', 1); // !! invalid expression, canot extract set function
114+
115+
component.$update(function(data){ // data == component.data
116+
data.a.b = 2;
117+
});
118+
119+
// multi $update
120+
component.$update({
121+
"b": 1,
122+
"a.b": 100
123+
});
124+
125+
126+
component.$update() // do nothing , just enter digest phase
127+
128+
```
129+
130+
> <h5>Warning: </h5>
131+
> 无论传入什么参数，运行$update之后都会进行组件作用域内的dirty-check
132+
133+
<a name="get"></a>
134+
### 5 `component.$get(expr)`
135+
136+
137+
除了直接操作数据对象`data` 去获取值， 你也可以使用`$get`去获取表达式的值，这个相当于angular的`$eval`，__`$get`的出现主要是为了获取[计算属性的值](computed.md)__
138+
139+
140+
__Exmaple__
141+
142+
143+
```javascript
144+
var component = new Regular({
145+
data: {items: [1,2,3]},
146+
computed: {
147+
computedLength: "items.length"
148+
}
149+
});
150+
151+
component.$get("items.length"); //=== 3
152+
component.$get("computedLength"); //=== 3
153+
154+
```
155+
156+
> 由于为了ie8的支持，你目前无法直接使用data.computedLength的方式来获取计算属性。（不过未来可能会发布一个更友好的版本来去掉ie8-的支持）;
157+
158+
159+
160+
161+
<a name="bind"></a>
162+
### 6 `component.$bind(component2, expr1[, expr2])`
163+
164+
与另一个组件实现双向绑定
165+
166+
__Arguments__
167+
1. component2<Regular>: 要绑定的组件
168+
2. expr1 <Expression|String|Object|Array>: 此参数有多种参数类型
169+
- Expression|String: 本组件要绑定的表达式
170+
- Object: 同时绑定多个表达式对
171+
- Array: 表达式列表,同时实现多个同名表达式(即只传入expr1)
172+
3. expr2 <Expression|String>: 目标组件要绑定的表达式, 缺省为expr1
173+
174+
> <h5>WARN</h5>
175+
> 1. 如果两个表达式都是setable的，可实现双向绑定，否则只能实现单向绑定
176+
> 2. 如果连个组件在bind时是不同步的，component2数据会先同步到component
177+
178+
179+
__Example__:
180+
181+
两个独立的分页器实现数据联动
182+
183+
```javascript
184+
185+
// insert
186+
var pager = new Pager({data: {total: 100, current:20}}).$inject('#bind1');
187+
var pager2 = new Pager({data: {total: 50, current:2}}).$inject('#bind1');
188+
189+
var pager3 = new Pager({data: {total: 100, current:20}}).$inject('#bind2');
190+
var pager4 = new Pager({data: {total: 50, current:2}}).$inject('#bind2');
191+
192+
var pager5 = new Pager({data: {total: 100, current:2}}).$inject('#bind3');
193+
var pager6 = new Pager({data: {total: 50, current:20}}).$inject('#bind3');
194+
195+
196+
// style 1
197+
pager.$bind(pager2, ['current', 'total']);
198+
199+
200+
// style 2
201+
pager3.$bind(pager4, 'current', 'current')
202+
pager3.$bind(pager4, 'total')
203+
204+
// style 3
205+
pager5.$bind(pager6, {current: "current", total: "total"});
206+
207+
208+
// bind chain
209+
var pager = new Pager({data:{total: 1000, current:1}}).$inject('#bind_chain');
210+
for(var i = 0; i < 10; i++){
211+
var pager = new Pager({data:{total: 1000, current:1}})
212+
.$bind(pager, ['total', 'current'])
213+
.$inject('#bind_chain');
214+
}
215+
216+
```
217+
218+
[|DEMO|](http://fiddle.jshell.net/leeluolee/7wgUf/)
219+
220+
其中pager的实现在[这里](https://rawgit.com/regularjs/regular/master/example/pager/pager.js)
221+
222+
223+
224+
225+
226+

‎zh/introduct/index.md‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -28,11 +28,12 @@ component即代表组件实例, 注意这些公有都有`$`前缀 意味不建
2828
1. [component.$watch](../core/binding.html#watch): 创建一个数据监听
2929
2. [component.$unwatch](../core/binding.html#unwatch) 解绑一个数据监听
3030
3. [component.$update](../core/binding.html#update) 更新一个数据并进入digest(类似angular的$apply)
31-
4. [component.$bind](../core/binding.html#bind) 创建组件之间的双向绑定
32-
5. [component.$on](../core/message.html#on) 创建一个事件监听器(非dom)
33-
6. [component.$off](../core/message.html#off) 解除一个事件监听(非dom)
34-
7. [component.$emit](../core/message.html#emit) 触发一个事件监听(非dom)
35-
8. [component.$inject](../getting-start/quirk-example.html#inject) 插入组件到指定位置
31+
4. [component.$get](../core/binding.html#get) 获得一个表达式的值(类似angular的$eval)
32+
5. [component.$bind](../core/binding.html#bind) 创建组件之间的双向绑定
33+
6. [component.$on](../core/message.html#on) 创建一个事件监听器(非dom)
34+
7. [component.$off](../core/message.html#off) 解除一个事件监听(非dom)
35+
8. [component.$emit](../core/message.html#emit) 触发一个事件监听(非dom)
36+
9. [component.$inject](../getting-start/quirk-example.html#inject) 插入组件到指定位置
3637

3738

3839
xian
@@ -48,7 +49,7 @@ xian
4849

4950
## Regular.dom
5051

51-
提供基本的操作dom帮助，注意之类并没有封装成类似jqLite的对象，而是纯粹的静态方法.
52+
提供基本的操作dom帮助，注意Regularjs并没有封装成类似jqLite的对象，而是纯粹的静态方法.
5253

5354

5455
## Regular.util

‎zh/introduct/index.md~‎

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
#API索引
2+
3+
由于API介绍分散在了本书各个章节, 为了方便对照, 本小节做了所有API的索引
4+
5+
6+
7+
# 静态接口
8+
9+
静态接口有些是只属于`Regular` 而有些是属于`Component`(即Regular及其子类)通用, 如下所示.
10+
11+
12+
1. [Component.extend](../core/class.html#extend): 定义Regular组件
13+
7. [new Component](../core/class.html#instance): 实例化组件
14+
1. [Component.implement](../core/class.html#implement): 扩展组件原型
15+
2. [Component.directive](../core/directive.md): 扩展指令
16+
3. [Component.filter](../core/filter.md): 扩展过滤器
17+
4. [Component.event](../core/event.md): 扩展自定义事件
18+
5. [Component.animation](../core/animation.md) 扩展自定义动画
19+
6. [Component.use](../core/use.md) 使用一个插件
20+
7. [Regular.expression](../syntax/expression.html#expression) 创建一个表达式对象
21+
22+
23+
24+
# 实例接口
25+
26+
component即代表组件实例, 注意这些公有都有`$`前缀 意味不建议进行重写
27+
28+
1. [component.$watch](../core/binding.html#watch): 创建一个数据监听
29+
2. [component.$unwatch](../core/binding.html#unwatch) 解绑一个数据监听
30+
3. [component.$update](../core/binding.html#update) 更新一个数据并进入digest(类似angular的$apply)
31+
4. [component.$get](../core/binding.html#get) 获得一个表达式的值(类似angular的$eval)
32+
5. [component.$bind](../core/binding.html#bind) 创建组件之间的双向绑定
33+
6. [component.$on](../core/message.html#on) 创建一个事件监听器(非dom)
34+
7. [component.$off](../core/message.html#off) 解除一个事件监听(非dom)
35+
8. [component.$emit](../core/message.html#emit) 触发一个事件监听(非dom)
36+
9. [component.$inject](../getting-start/quirk-example.html#inject) 插入组件到指定位置
37+
38+
39+
xian
40+
41+
# 内置模块
42+
43+
1. [指令directive](../core/directive.html#buildin)
44+
45+
46+
# Regular中的内置帮助函数集
47+
48+
49+
50+
## Regular.dom
51+
52+
提供基本的操作dom帮助，注意Regularjs并没有封装成类似jqLite的对象，而是纯粹的静态方法.
53+
54+
55+
## Regular.util
56+
57+
提供一些通用帮助方法的支持
58+
59+
60+
61+
## Regular.config
62+
Regular的一些配置项
63+
64+
65+

0 commit comments

Comments
 (0)
Back | FazBrowse Home | New Git URL