使用Ember JS创建级联下拉框
Ember JS因为有Ember.ComputedProperty的存在，因为做级联查询其实是很简单的。
本帖提供一个省、市、镇的级联查询小示例，仅供参考。
核心代码很少：
在controller里添加以下代码：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
| // XxxController
provinces: function() {
return this.get('store').find('province');
}.property(),
cities: function() {
if(!this.get('province')) {
return;
}
this.set('city', null);
this.set('town', null);
return this.get('store').findQuery('city', {
provinceId: this.get('province.id')
});
}.property('province'),
towns: function() {
if(!this.get('city')) {
return;
}
this.set('town', null);
return this.get('store').findQuery('town', {
cityId: this.get('city.id')
});
}.property('city')
|
template内容如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
| <form>
<label>省</label>
{{view Ember.Select
contentBinding="provinces"
optionLabelPath="content.name"
optionValuePath="content.id"
selectionBinding="province"
prompt="--- 选择省 ---"}}
<label>市</label>
{{view Ember.Select
contentBinding="cities"
optionLabelPath="content.name"
optionValuePath="content.id"
selectionBinding="city"
prompt="--- 选择市 ---"}}
<label>镇</label>
{{view Ember.Select
contentBinding="towns"
optionLabelPath="content.name"
optionValuePath="content.id"
selectionBinding="town"
prompt="--- 选择镇 ---"}}
</form>
|
具体例子请参考；http://jsbin.com/OGIrUDA/22
完整代码：https://gist.github.com/pudgecon/7414207
BTW: 欢迎访问Ember JS 中文论坛(emberjs.cn)进行交流。