KnockoutJS 3.X API 第四章 表單綁定(6) click綁定


目的

click綁定主要作用是用於DOM元素被點擊時調用相關JS函數。最常見用於button、input、a元素。

例如:

You've clicked times

源碼:

<div>
    You've clicked <span data-bind="text: numberOfClicks"></span> times
    <button data-bind="click: incrementClickCounter">Click me</button>
</div>
 
<script type="text/javascript">
    var viewModel = {
        numberOfClicks : ko.observable(0),
        incrementClickCounter : function() {
            var previousCount = this.numberOfClicks();
            this.numberOfClicks(previousCount + 1);
        }
    };
</script>

如上述例子,沒點過button被點擊時都會觸發incrementClickCounter 回調函數,從而更新視圖狀態。

備注,click后所跟的並不一定非得是視圖模型的函數。可以是任何對象的函數,直接引用即可。例如:click: someObject.someFunction

備注1:傳遞一個參數

當您的處理程序中,UI展示了一個監控屬性數組,例如:

源碼:

<ul data-bind="foreach: places">
    <li>
        <span data-bind="text: $data"></span>
        <button data-bind="click: $parent.removePlace">Remove</button>
    </li>
</ul>
 
 <script type="text/javascript">
     function MyViewModel() {
         var self = this;
         self.places = ko.observableArray(['London', 'Paris', 'Tokyo']);
 
         // The current item will be passed as the first parameter, so we know which place to remove
         self.removePlace = function(place) {
             self.places.remove(place)
         }
     }
     ko.applyBindings(new MyViewModel());
</script>

當點擊remove時只會刪除當前的項目,從源碼上看,說明傳遞的是當前項目。這種在渲染集合數據的時候特別有用。

需要注意兩點:

  • 如果你是一個嵌套在綁定上下文,例如,如果使用foreachwith綁定,但你的處理函數是根視圖模型或其他一些父模型,你需要使用一個前綴,如$parent$root定位處理函數。
  • 在您的視圖模型,但是這是可以使用self(或其他一些變量)作為this的一個別名

備注2:傳遞事件對象(多參數)

一些情況下,你可能需要訪問DOM的事件對象(event),一般情況下KO會將事件對象作為第二個參數傳遞給函數。例如:

<button data-bind="click: myFunction">
    Click me
</button>
 
 <script type="text/javascript">
    var viewModel = {
        myFunction: function(data, event) {
            if (event.shiftKey) {
                //do something different when user has shift key down
            } else {
                //do normal action
            }
        }
    };
    ko.applyBindings(viewModel);
</script>

如果你要傳遞更多的參數,可以使用函數文本的方式。例如:

<button data-bind="click: function(data, event) { myFunction('param1', 'param2', data, event) }">
    Click me
</button>

還有更優雅的寫法,比如使用bind函數綁定多個參數。例如:

<button data-bind="click: myFunction.bind($data, 'param1', 'param2')">
    Click me
</button>

備注3:允許默認點擊動作

默認情況下,Ko會阻止任何默認動作。比如你把click綁定到一個a標簽上,當點擊時,瀏覽器會調用click綁定的回調函數。但是不會執行href的連接跳轉。

如果你不希望這種默認的阻止動作。可以在回調函數中返回true。

備注4:防止冒泡事件

默認情況下,KO允許click綁定繼續到任何高級別的事件處理。例如,父元素和子元素都有click綁定,那么這兩個元素的click綁定會都被觸發。

可以使用一個附加綁定clickBubble來解決該問題:

<div data-bind="click: myDivHandler">
    <button data-bind="click: myButtonHandler, clickBubble: false">
        Click me
    </button>
</div>

如上述例子,myButtonHandler將被調用,而附件綁定clickBubble,並設置了false,這至使父元素的myDivHandler不會被調用。

備注5:與Jquery互動

如果存在Jquery的click事件,KO將會去調用Jquery的click事件,如果你想總是使用自己本地的事件來處理,可以在ko.applyBindings中加入如下代碼:

ko.options.useOnlyNativeEvents = true;


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM