本教程將介紹avalon的高級特性
- date過濾器的使用, 這個與angular的date過濾器的使用方法差不多，{{xxx|date("yyyy MM d")}}
- $watch監聽，相當於把監控屬性變成一種事件，當它變化時，就執行它綁定的回調。vm.$watch("firstName", function(){alert("我是回調")})
- 不監聽屬性或方法的定義，就是$開頭，或放在$skipArray數組中。
- if綁定，類似於knockout的if綁定，根據求值表達式的情況決定把當前元素插入DOM樹。ms-if=expr
HTML結構
<div ms-controller="datepicker">
<div class="ui-datepicker">
<div class="ui-datepicker-header">
<a href="###" title="Prev" class="ui-datepicker-month ui-datepicker-prev" ms-click="prevMonth">
<
</a>
<a href="###"title="Next" class="ui-datepicker-month ui-datepicker-next" ms-click="nextMonth">
>
</a >
<div class="ui-datepicker-title" >
<select ms-each-month="$months" ms-if="changeMonth" ms-model="currentMonth" >
<option value="{{month}}" ms-selected="currentMonth === month">{{month+1}}月</option>
</select>
<select ms-each-year="candidateYears" ms-if="changeYear" ms-model="currentYear" >
<option value="{{year}}" ms-selected="currentYear === year">{{year}}年</option>
</select>
{{title}}
</div>
</div>
<table ms-click="select">
<thead>
<tr ms-each-date="$weeks">
<th>{{date}}</th>
</tr>
</thead>
<tbody ms-each-week="candidateWeeks">
<tr ms-each-day="week" >
<td><span ms-visible="day" ms-class-selected="isSelected" ms-class-disabled="day && day[3]" ms-class-today="isToday" >{{ day[2] }}</span></td>
</tr>
</tbody>
</table>
</div>
<p><input type="radio" ms-model="changeMonth" />可選擇月份</br/>
<input type="radio" ms-model="changeYear" />可選擇年份</p>
<div class="font">{{selectedDate | date("yyyy-MM-d")}}</div>
</div>
JS
avalon.ready(function() {
var model = avalon.define("datepicker", function(vm) {
//配置
vm.changeYear = false
vm.changeMonth = false
vm.minDate = new Date(2013, 4, 25)
//當前時間
vm.current = new Date;
vm.currentMonth = vm.current.getMonth();
vm.currentYear = vm.current.getFullYear();
vm.selectedDate = new Date;
//顯示頂部的年份與月份
vm.title = {
get: function() {
var format = "";
if (!this.changeYear && this.changeMonth) {
format = "yyyy年";
} else if (this.changeYear && !this.changeMonth) {
format = "MMMM";
} else if (!this.changeYear && !this.changeMonth) {
format = "MMMM yyyy年";
}
return format && avalon.filters.date(this.current, format);
}
};
//星期顯示
vm.$weeks = "日一二三四五六".split("");
//月份下拉菜單
vm.$months = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]
//當月的日期
function getWeeks() {
var cur = vm.current;
var year = cur.getFullYear();
var month = cur.getMonth();
var date = cur.getDate()
cur.setMonth(month + 1);
cur.setDate(0);
var num = cur.getDate();
var dates = avalon.range(1, num + 1);
dates = dates.map(function(d) {
var timestamp = new Date(year, month + 1, d) - 0
var disabled = false;
if (vm.minDate) {
disabled = timestamp < vm.minDate - 0;
}
if (disabled && vm.maxDate) {
disabled = timestamp > vm.maxDate - 0;
}
return [ year, month, d, disabled];
});
cur.setMonth(month);
cur.setDate(1);
var before = cur.getDay();
var shim = new Array(before);//如果當月的第一天不是星期天，需要補空格
dates = shim.concat(dates);
cur.setDate(date);//還原
var ret = [];
while (dates.length) {//每行七個分組
ret.push(dates.splice(0, 7));
}
return ret;
}
vm.candidateWeeks = getWeeks();
//取得當年的前后20年
function getYears() {
var y = vm.currentYear;
return avalon.range(y - 10, y + 10);
}
vm.candidateYears = getYears();
//點擊事件
vm.nextMonth = function() {
var date = vm.current;
var m = date.getMonth();
vm.$fire("currentMonth", m + 1)
};
//點擊事件
vm.prevMonth = function() {
var date = vm.current;
var m = date.getMonth();
vm.$fire("currentMonth", m - 1);
};
//偵聽
vm.$watch("currentMonth", function(month) {
var date = vm.current;
date.setMonth(month);
vm.currentMonth = month;
vm.candidateWeeks = getWeeks();
vm.title = date - 0;
});
vm.$watch("currentYear", function(year) {
var date = vm.current;
date.setFullYear(year);
vm.currentYear = year;
vm.$fire("currentMonth", date.getMonth());
});
//高亮當前選中的日期
vm.select = function(e) {
var el = e.target;
if (el.tagName === "SPAN" && el.parentNode.tagName === "TD" && !/disabled/.test(el.className)) {
vm.selected = el.innerHTML;
var d = el.$scope.day.slice(0, 3);
vm.selectedDate = new Date(d[0],d[1],d[2]);
}
};
vm.selected = "";
vm.isSelected = function() {
return this.innerHTML === vm.selected;
};
//高亮今天的日期
var today = new Date;
today = [ today.getFullYear(), today.getMonth(), today.getDate() ].join();
vm.isToday = function() {
var day = this.$scope && this.$scope.day;
return day && day.slice(0, 3).join() === today;
};
});
avalon.scan();
});
這就完成了，如果要用jQuery實現相似的功能，起碼要千行。主要原因是MVVM的核心是數據。數據是底層、是心臟，數據變了，作為表層的UI就會跟着變，將數據展現給用戶；如果用戶修改了UI元素上的值，相當於透過UI元素直接修改了底層的數據；數據處於核心地位，UI處於從屬地位。DOM操作全部隱藏在UI的綁定中（ms-html，就是調用innerHTML操作，ms-on-click進行事件綁定， ms-class-*，就是調用增刪類名，ms-visible控制了元素的顯隱，ms-if，ms-each進行流程控制處理某個區域的所有元素的生成移除……），由框架自動維護，我們只需要關注業務邏輯！