3-1. 内建
3-1-1. hi-bind
元素innerHTML绑定
<!-- examples/directives/bind.html -->
<div id="app">
<input type="text" hi-value="user.name"/>
<div hi-bind="user.name">{{user.name}}</div>
</div>
const app = new Highway({
$el: $('#app'),
$scope: {
user: {
name: 'highway'
}
}
});
3-1-2. hi-value
表单组件的值绑定
text
<!-- examples/directives/value.html --> <input type="text" hi-value="user.name">
password
<!-- examples/directives/value.html --> <input type="password" hi-value="user.password">
number
<!-- examples/directives/value.html --> <input type="number" hi-value="user.income">
tel
<!-- examples/directives/value.html --> <input type="tel" hi-value="user.amount">
textarea
<!-- examples/directives/value.html --> <textarea hi-value="user.description"></textarea>
select
<!-- examples/directives/value.html --> <select hi-value="user.city"> <option value="shanghai">shanghai</option> <option value="guangzhou">guangzhou</option> <option value="shenzhen">shenzhen</option> </select>
radio
<!-- examples/directives/value.html --> <input name="sex" type="radio" value="male" hi-value="user.sex"> male <input name="sex" type="radio" value="female" hi-value="user.sex"> female
checkbox
<!-- examples/directives/value.html --> <input name="hobbies" type="checkbox" value="sports" hi-value="user.hobbies"> sports <input name="hobbies" type="checkbox" value="games" hi-value="user.hobbies"> games <input name="hobbies" type="checkbox" value="reading" hi-value="user.hobbies"> reading
checkbox的绑定值是一个数组,如上,选中sports, games, 得到hobbies值为[‘sports’, ‘games’]
3-1-3. hi-on
事件绑定, 格式hi-on:event=”handler”,支持所有的DOM事件
触发时handler获得
- $el: 触发元素
- $ev: window.event事件
<!-- examples/directives/on.html -->
<div id="app">
<button id="btn" hi-on:click="clickMe">clickMe</button>
</div>
const app = new Highway({
$el: $('#app'),
clickMe($el, $ev) {
console.log(`element id is ${$el.attr('id')}, event type is ${$ev.type}`)
}
});
3-1-4. hi-show
显示绑定,显示元素当属性值为true
<!-- examples/directives/show.html -->
<div id="app">
<div hi-show="see">you can see me</div>
<input name="show" type="radio" value="1" hi-value="see" checked> show
<input name="show" type="radio" value="0" hi-value="see"> hide
</div>
false、’false’、”、’0’、null、undefined、0均被判断为boolean false
3-1-5. hi-hide
隐藏绑定,显示元素当属性值为true
<!-- examples/directives/hide.html -->
<div id="app">
<div hi-hide="see">you can see me</div>
<input name="show" type="radio" value="1" hi-value="see" checked> hide
<input name="show" type="radio" value="0" hi-value="see" > show
</div>
false、’false’、”、’0’、null、undefined、0均被判断为boolean false
3-1-6. hi-if
插入元素当属性值为true,如为false将被移除
<!-- examples/directives/if.html -->
<div id="app">
<div hi-if="ifMe">
<p>you can see me</p>
<my-component></my-component>
</div>
<input name="if" type="radio" value="true" hi-value="ifMe" checked> render
<input name="if" type="radio" value="false" hi-value="ifMe"> destroy
</div>
<script id="template" type="text/template">
<div>i am {{name}}</div>
</script>
const myComponent = Highway.extend({
$template: $('#template').html(),
$scope: {
name: 'myComponent'
},
$mount() {
console.log('>>>::myComponent rendered');
},
$unmount() {
console.log('>>>::myComponent destroyed');
}
});
const app = new Highway({
$el: $('#app'),
$components: {
'my-component': myComponent
}
});
false、’false’、”、’0’、null、undefined、0均被判断为boolean false
hi-if会触发局部编译/销毁过程,同时移除元素
hi-show/hi-hide仅会隐藏元素,并不会移除
3-1-7. hi-repeat
重复绑定
<!-- examples/directives/repeat.html -->
<div id="app">
<ul>
<li hi-repeat="user in data.users" hi-data:id="{{user.id}}">
<p>{{user.name}}</p>
</li>
</ul>
<button hi-on:click="change">change</button>
</div>
const app = new Highway({
$el: $('#app'),
$scope: {
data: {
users: [
{
'id': '001',
'name': 'jackey'
},
{
'id': '002',
'name': 'suse'
},
{
'id': '003',
'name': 'ann'
},
]
}
},
change() {
this.$set('data.users[2].name', 'highway');
}
});
repeat指令会触发局部编译,同时临时伸展作用域
3-1-8. hi-src
元素src绑定
<!-- examples/directives/src.html -->
<div id="app">
<img hi-src="imageUrl" width="100%"/>
</div>
3-1-9. hi-href
元素href绑定
<!-- examples/directives/href.html -->
<div id="app">
<a hi-href="link">click me</a>
</div>
3-1-10. hi-data
元素data属性绑定, hi-data:dataProp=”prop”
<!-- examples/directives/data.html -->
<div id="app">
<button hi-on:click="clickMe" hi-data:name="name">clickMe</button>
</div>
const app = new Highway({
$el: $('#app'),
$scope: {
name: "highway"
},
clickMe($el) {
alert($el.data('name'));
}
});
3-1-11. hi-enable
元素enable绑定
<!-- examples/directives/enable.html -->
<div id="app">
<button hi-enable="enable" hi-on:click="clickMe">button</button>
<input name="enable" type="radio" value="1" hi-value="enable" > enable
<input name="enable" type="radio" value="0" hi-value="enable"> disable
</div>
const app = new Highway({
$el: $('#app'),
clickMe() {
alert(1)
}
});
3-1-12. hi-disable
元素disable绑定
<!-- examples/directives/disable.html -->
<div id="app">
<button hi-enable="disable" hi-on:click="clickMe">button</button>
<input name="disable" type="radio" value="1" hi-value="disable" checked> disable
<input name="disable" type="radio" value="0" hi-value="disable"> enable
</div>
const app = new Highway({
$el: $('#app'),
clickMe() {
alert(1)
}
});
3-1-13. hi-readonly
<!-- examples/directives/readonly.html -->
<div id="app">
<p>{{name}}</p>
<input type="text" hi-readonly="readonly" hi-value="name"/>
<input name="readonly" type="radio" value="1" hi-value="readonly" checked> readonly
<input name="readonly" type="radio" value="0" hi-value="readonly" > editable
</div>
const app = new Highway({
$el: $('#app'),
$scope: {
name: 'highway'
}
});
3-1-14. hi-attr
元素属性值绑定。hi-attr:domAttr=”prop”,任意绑定指定DOM属性值。
<!-- examples/directives/attr.html -->
<div id="app">
<img hi-attr:src="imageUrl" hi-attr:width="width" />
</div>
const app = new Highway({
$el: $('#app'),
$scope: {
width: '50%',
imageUrl: './dog.jpeg'
}
});
3-1-15. hi-css
元素css值绑定。hi-css:css=”prop”。
<!-- examples/directives/css.html -->
<div id="app">
<div hi-css:background-color="{{bgColor}}">div</div>
</div>
const app = new Highway({
$el: $('#app'),
$scope: {
bgColor: 'red'
}
});
3-1-16. hi-class
元素样式值绑定。hi-class:unique=”obj[prop]”,遇多个中间以;分割
3-1-16-1. 直接量
3-1-16-1-1. 单个
<div hi-class="direct.bgColor">direct-0</div>
<div hi-class="direct.fontSize">direct-1</div>
3-1-16-1-2. 组合
中间以”,”号分隔,如使用多个hi-class指令,需指定uniqueid,例如hi-class:bgColor=”direct.bgColor”, uniqueid=”bgColor”
<div hi-class:bgColor="direct.bgColor", hi-class:fontSize="direct.fontSize">direct-2</div>
<div hi-class="direct.bgColor, direct.fontSize">direct-3</div>
3-1-16-2. 映射
3-1-16-2-1. 单个
<div hi-class="{'red': 'bg-red', 'green': 'bg-green'}[mapping.bgColor];">mapping-0</div>
<div hi-class="{'fs20': 'fs-20', 'fs40': 'fs-40'}[mapping.fontSize]">mapping-1</div>
3-1-16-2-2. 组合
中间以”,”号分隔,如使用多个hi-class指令,需指定uniqueid。
<div hi-class:bgColor="{'red': 'bg-red', 'green': 'bg-green'}[mapping.bgColor];" hi-class:bgColor="{'red': 'bg-red', 'green': 'bg-green'}[mapping.bgColor];">mapping-2</div>
<div hi-class="{'red': 'bg-red', 'green': 'bg-green'}[mapping.bgColor];{'fs20': 'fs-20', 'fs40': 'fs-40'}[mapping.fontSize]">mapping-3</div>
3-1-16-3. 示例
<!-- examples/directives/class.html -->
<style type="text/css">
.bg-red {
background-color: red;
}
.bg-green {
background-color: green;
}
.fs-20 {
font-size: 20px;
}
.fs-40 {
font-size: 40px;
}
</style>
<div id="app">
<p>>>> direct - single</p>
<div hi-class="direct.bgColor">direct-0</div>
<div hi-class="direct.fontSize">direct-1</div>
<p>>>> direct - combi</p>
<div hi-class:bgColor="direct.bgColor", hi-class:fontSize="direct.fontSize">direct-2</div>
<div hi-class="direct.bgColor, direct.fontSize">direct-3</div>
<hr>
<p>>>> mapping - single</p>
<div hi-class="{'red': 'bg-red', 'green': 'bg-green'}[mapping.bgColor];">mapping-0</div>
<div hi-class="{'fs20': 'fs-20', 'fs40': 'fs-40'}[mapping.fontSize]">mapping-1</div>
<p>>>> mapping - combi</p>
<div hi-class:bgColor="{'red': 'bg-red', 'green': 'bg-green'}[mapping.bgColor];" hi-class:bgColor="{'red': 'bg-red', 'green': 'bg-green'}[mapping.bgColor];">mapping-2</div>
<div hi-class="{'red': 'bg-red', 'green': 'bg-green'}[mapping.bgColor];{'fs20': 'fs-20', 'fs40': 'fs-40'}[mapping.fontSize]">mapping-3</div>
</div>
const app = new Highway({
$el: $('#app'),
$scope: {
mapping: {
bgColor: 'red',
fontSize: 'fs40'
},
direct: {
bgColor: 'bg-red',
fontSize: 'fs-20'
}
}
});
3-2. 自定义
自定义指令为一个工厂函数
3-2-1. 入参
参数
- $el: 指定所在的DOM元素,为一个jQuery对象
- arg:参数,例如hi−attr:title="myTitle", arg = ‘title’
- exp:表达式,例如hi−attr:title="myTitle", exp = ‘myTitle’
- scope:当前作用域,例如hi−attr:title="myTitle",可以直接通过 scope.$get(‘myTitle’)获取当前作用域中myTitle值。
- $ctx: 上下文, 当前视图(子视图)实例this值
// 通过bg-color指令设置元素背景颜色 <div bg-color="#ff0000"></div>
const bgColor = function ({$el, $exp}) {
$el.css('background-color', $exp)
};
3-2-2. 出参
- $mount:生命周期函数,挂载时调用。
- $unmount:生命周期函数,卸载时调用
3-2-3. 全局
全局有效,通过Highway.directive指定
Highway.directive('bg-color', bgColor);
3-2-4. 局部
指定视图中有效,通过View.$directives指定
3-2-5. 示例
自定义指令,指令格式为hi-bgcolor=”color”
<!-- examples/directives/customized.html -->
<div id="app">
<div hi-bgcolor="#ff0000">highway</div>
</div>
const bgColor = function ({$el, $exp}) { //$ctx, $el, $arg, $exp
$el.css('background-color', $exp);
};
//Highway.directive('hi-bgcolor', bgColor);
const app = new Highway({
$el: $('#app'),
$directives: {
'hi-bgcolor': bgColor
}
});
3-2-3. 指令模式
Highway中预置了指令模式,快速构建您的自定义指令,可通过Highway.directive.pattern指定
接收4个参数,依次为
- $exp:表达式
- $scope:作用域
- $ctx:上下文
- $updater:更新函数
<!-- examples/directives/pattern.html -->
<div id="app">
<div hi-bgcolor="bgColor">highway</div>
</div>
const bgColor = function ({$el, $exp, $scope, $ctx}) { //$ctx, $el, $arg, $exp
return Highway.directive.pattern($exp, $scope, $ctx, function ({newVal, secure}) {
newVal = secure ? Highway.utils.secureHtml(newVal) : newVal;
$el.css('background-color', newVal);
});
};
//Highway.directive('hi-bgcolor', bgColor);
const app = new Highway({
$el: $('#app'),
$scope: {
bgColor: 'red'
},
$directives: {
'hi-bgcolor': bgColor
}
});