Avalon-作用域绑定

1. 作用域绑定

1.1 ms-controller

html

ms-controller:可以嵌套，当本层次vm没有定义相应属性时，会寻找上层属性

<div class="container">
<div class="row">
<div class="col-md-12" ms-controller="first">
<p class="text-muted">{{name}}:{{color}}</p>
<div class="col-md-12" ms-controller="second">
<p class="text-primary">{{name}}:{{color}}</p>
<div class="col-md-12" ms-controller="third">
<p class="text-danger">{{name}}:{{color}}</p>
</div>
</div>
</div>
</div>
</div>

avalon.define({
$id:'first',
name:'my first demo',
color:'as you like'
});
avalon.define({
$id:'second',
name:'test nest',
color:'i like purple'
});
avalon.define({
$id:'third',
name:'test nest without color'
});
avalon.scan();

效果



1.2 ms-important

html

ms-important:不向上寻找

<div class="container">
<div class="row">
<div class="col-md-12" ms-controller="first">
<p class="text-muted">{{name}}:{{color}}</p>
<div class="col-md-12" ms-controller="second">
<p class="text-primary">{{name}}:{{color}}</p>
<div class="col-md-12" ms-important="special">
<p class="text-danger">{{name}}:{{color}}</p>
</div>
</div>
</div>
</div>
</div>

avalon.define({
$id:'first',
name:'my first demo',
color:'as you like'
});
avalon.define({
$id:'second',
name:'test nest',
color:'i like purple'
});
avalon.define({
$id:'special',
name:'test ms-important'
});
avalon.scan();

效果



1.3 ms-skip

html

ms-skip:会跳过插值表达式{{}}

<div class="container">
<div class="row">
<div class="col-md-12" ms-controller="first">
<p class="text-muted">{{name}}:{{color}}</p>
<div class="col-md-12" ms-controller="second">
<p class="text-primary">{{name}}:{{color}}</p>
<div class="col-md-12" ms-skip="skip">
<p class="text-danger">{{name}}:{{color}}</p>
</div>
</div>
</div>
</div>
</div>

avalon.define({
$id:'first',
name:'my first demo',
color:'as you like'
});
avalon.define({
$id:'second',
name:'test nest',
color:'i like purple'
});
avalon.define({
$id:'skip',
name:'test ms-skip',
color:'it will lose efficacy '
});
avalon.scan();

效果