需要在單元測試模擬它,百度谷歌了好久都沒有。后來認真想想,還是找到辦法了。因為我們手動交互某一行為,首先是讓它的某些屬性發生變化,其次是讓它觸發某事件。想明白這一點就簡單了。讓屬性發生變化,當然是改動其固有屬性,因此 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>
當然現在這樣做是不夠嚴謹,因為我是用人腦承擔了一些計算量。我們需要知道它是否發生了改變。因此有一個比較前后值的函數,這個可以看這里。