你的位置:首页 > Java教程

[Java教程]KnockOut绑定之Click绑定


       Click绑定对DOM元素添加一个函数,当DOM元素被点击的时候调用。在button,input 或者a标签中常用,但其实他适用于任何可见的DOM元素。

   example(click绑定)

@{  Layout = null;}<script src="~/Scripts/jquery-1.10.2.js"></script><script src="~/Scripts/knockout-3.2.0.js"></script><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);    }  };  ko.applyBindings(viewModel);</script>

View Code

       每当你点击button按钮的时候,viewModel 里面的incrementClickCounter() 函数被调用,然后更新 numberOfClicks 的值,然后更新界面

       我们可以调用任何javaScript函数,可以不在view model里面,也可以以someObject.someFunction的形式调用函数。

       example(传递本身绑定值作为参数)

<script src="~/Scripts/jquery-1.10.2.js"></script><script src="~/Scripts/knockout-3.2.0.js"></script><ul data-bind="foreach: places">  <li>    <!--foreach里面上下文是每一个place,可以用$data来表示当前项的值-->    <span data-bind="text: $data"></span>    <!--这儿也在foreach里面,所以click绑定对应的上下文也是$data,然后用$parent来调用其父项目,也就是viewModel,然后调用里面的removePlace函数-->    <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']);    //当前项的值会被传递过来作为第一个参数,所以我们知道数组里面的哪一项被移除    self.removePlace = function (place) {      self.places.remove(place)    }  }  ko.applyBindings(new MyViewModel());</script>

View Code

      在这个例子中有两点要注意:

  • 如果是在一个嵌套的绑定上下文,例如在一个foreach绑定,或者with块绑定,但是你要调用viewmodel下面的函数,这时候你需要一个调用当前节点的父节点,或者直接调用根节点去访问需要调用的函数,语法父节点用$parent,根节点用$root;
  • viewmodel里面用把this用一个self变量表示,相当于this的别名,防止在一些情况下引起的作用域链混乱;

     example(把事件传递给click调用的函数)

<script src="~/Scripts/jquery-1.10.2.js"></script><script src="~/Scripts/knockout-3.2.0.js"></script><button data-bind="click: myFunction">点击</button><script type="text/javascript">  var viewModel = {    //这儿的data,就是上个例子中我们传递过去绑定上下文的值    myFunction: function (data, event) {      if (event.shiftKey) {        //这儿对于click事件来说一般用不到,因为已经确定是click 事件了。        alert("shift");      } else {        //执行点击时操作        alert("normal");      }    }  };  ko.applyBindings(viewModel);</script>

View Code

     这个例子展示了给把事件句柄传递给函数,其中data指的是绑定上下文的值,其实也是指上个例子中的place

     example(传递任意参数给调用函数)

       如果你想传任意的参数给调用函数,你可以用一个函数字面量来作为一个参数,意思就是说,click后面你可以传递任何javascript变量,因为javascript语法的特殊形式,一个函数也能作为变量传递,所以可以直接在click后面写一个匿名函数,然后在该函数里面直接调用你想到调用的函数,同时把参数传递过去。

       

<script src="~/Scripts/jquery-1.10.2.js"></script><script src="~/Scripts/knockout-3.2.0.js"></script><button data-bind="click: myFunction">点击</button><button data-bind="click: function(data, event) { myFunction('param1', 'param2', data, event) }">  Click me</button><script type="text/javascript">  var viewModel = {    myFunction: function (parameter1, parameter2, parameter3, parameter4) {    }  };  ko.applyBindings(viewModel);</script>

View Code

     除了用函数字面量的这种办法,我们还可以用另一种办法,用knockout的绑定函数,语法为函数名.bing(里面可以传递参数);

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

View Code

     阻止DOM元素的默认事件

      默认情况下,当你对一个DOM元素绑定一个click事件后,当你点击的时候,他只会执行你的click事件,不会执行该DOM元素的默认事件。例如a标签,当你给他绑定了一个事件后,点击,执行绑定事件,但是他不会跳转该a标签指向的连接,如果你想让它继续执行,可以返回一个true;

<script src="~/Scripts/jquery-1.10.2.js"></script><script src="~/Scripts/knockout-3.2.0.js"></script><a href="http://www.cnblogs.com/santian/" data-bind="click: myFunction.bind($data, 'param1', 'param2')">  Click me</a><script type="text/javascript">  var viewModel = {    myFunction: function (parameter1, parameter2, parameter3, parameter4) {      alert(1);      //这儿如果你不return true,就不会跳转      //return true;    }  };  ko.applyBindings(viewModel);</script>

View Code

    阻止事件冒泡

     阻止事件冒泡,用如下语法

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

View Code

作者:一天两天三天

本文地址:http://www.cnblogs.com/santian/p/4345218.html

博客地址:http://www.cnblogs.com/santian/

转载请以超链接形式标明文章原始出处。