需要在單元測試模擬它,百度谷歌了好久都沒有。后來認真想想,還是找到辦法了。因為我們手動交互某一行為,首先是讓它的某些屬性發生變化,其次是讓它觸發某事件。想明白這一點就簡單了。讓屬性發生變化,當然是改動其固有屬性,因此 setAttribute(aaa,bbb)便出局了,因此它是用來設置自定義屬性(IE678另談,那是怪胎)。想觸發事件,我們可以用fireEvent或dispathEvent,阿狸從雅虎的YUI搞了一個event-simulate,想得更加周全,大家想深入可以參考一下。
下面就是我的成果了:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<script src="avalon.js"></script>
<script>
var model = avalon.define("test", function(vm) {
vm.array = ["aaa", "bbb", "ccc", "ddd"]
vm.selected = "ddd"
vm.$watch("selected", function(a) {
avalon.log(model.$model.selected)
})
})
function fireEvent(element, event) {
if (document.createEventObject) {
var evt = document.createEventObject();
return element.fireEvent('on' + event, evt)
} else {
var evt = document.createEvent("HTMLEvents");
evt.initEvent(event, true, true)
return !element.dispatchEvent(evt);
}
}
setTimeout(function() {
var el = document.getElementById("aaa")
el.options[1].selected = true//改動屬性
fireEvent(el, "change")//觸發事件
}, 3000)
</script>
</head>
<body>
<div ms-controller="test">
<select ms-duplex="selected" id="aaa">
<option ms-repeat="array" ms-value="el">{{el}}</option>
</select>
</div>
</body>
</html>
當然現在這樣做是不夠嚴謹,因為我是用人腦承擔了一些計算量。我們需要知道它是否發生了改變。因此有一個比較前后值的函數,這個可以看這里。
