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();

效果