3. 指令 -- Highway MVVM

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>

con
11d1f
st 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
}
});