Knockout.Js官網學習（event綁定、submit綁定）

event綁定

event綁定在DOM元素上添加指定的事件句柄以便元素被觸發的時候執行定義的JavaScript 函數。大部分情況下是用在keypress，mouseover和mouseout上。

簡單示例

 

<div>
    <div data-bind="event: { mouseover: enableDetails, mouseout: disableDetails }">        Mouse over me    </div>
    <div data-bind="visible: detailsEnabled">        Details    </div>
</div>
<script type="text/javascript" src="~/Scripts/knockout-2.3.0.debug.js"></script>
<script type="text/javascript">
    var viewModel = {
        detailsEnabled: ko.observable(false),
        enableDetails:function() {
            this.detailsEnabled(true);
        },
        disableDetails:function () {
            this.detailsEnabled(false);
        }
    };
    ko.applyBindings(viewModel);
</script>

就是通過在一個div上綁定兩個事件，一個鼠標點上去的mouseover讓下面的div內容顯示出來，另一個是鼠標移出mouseout讓下面的div內容再隱藏。

你可以聲明任何JavaScript函數 – 不一定非要是view model里的函數。你可以聲明任意對象上的任何函數，例如： event: { mouseover: someObject.someFunction }。

View model上的函數在用的時候有一點點特殊，就是不需要引用對象的，直接引用函數本身就行了，比如直接寫event: { mouseover: enableDetails } 就可以了，而無需寫成： event: { mouseover: viewModel.enableDetails }（盡管是合法的）。

submit綁定

 submit綁定在form表單上添加指定的事件句柄以便該form被提交的時候執行定義的JavaScript 函數。只能用在表單form元素上。

 

 當你使用submit綁定的時候， Knockout會阻止form表單默認的submit動作。換句話說，瀏覽器會執行你定義的綁定函數而不會提交這個form表單到服務器上。可以很好地解釋這個，使用  submit綁定就是為了處理view model的自定義函數的，而不是再使用普通的HTML form表單。如果你要繼續執行默認的HTML form表單操作，你可以在你的submit句柄里返回true。

submit簡單示例

<form data-bind="submit: doSomething">    ... form contents go here ... 
<input type="text" value="1" id="test"/>       
<button type="submit">Submit</button>
</form>

簡單的UI元素

        doSomething: function (formElement) {
            alert(formElement[0].outerHTML);
        }

簡單的viewModel屬性

總共有兩個元素一個是錄入框，另一個是submit提交按鈕

在form上，你可以使用click綁定代替submit綁定。不過submit可以handle其它的submit行為，比如在輸入框里輸入回車的時候可以提交表單。