Knockout 事件传递参数的方法

75 阅读 0 评论 50 点赞

我是靠谱客的博主迷路方盒，最近开发中收集的这篇文章主要介绍Knockout 事件传递参数的方法，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

在Knockout中直接使用函数传递参数是不行的，会导致函数在初始化时就被调用，例如：

[html] 
view plain
copy

 <span style="font-size:14px;"><div data-bind="click:changeEditor($index)"></div>  
 </span>  

将导致函数在初始化时，点击事件changeEditor()函数就被调用，显然，违背初衷。

要实现参数的传递，有2种方法：

1、方法一：使用函数包裹

[html] 
view plain
copy

 <div data-bind="event: { click: function(data, event) {changeEditor('param1', 'param2', data, event) } }">  
     Mouse over me  
 </div>  

点击事件响应函数又套了一层，调用chageEditor函数，在原changeEditor()函数调用中传入参数。

2、方法二：使用bind函数

[html] 
view plain
copy

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

使用该方式传递参数时，$data为形式化写法，不能改变，后面可带若干参数，如param1，param2等。

3、缺省的参数传递

[html] 
view plain
copy

 <div data-bind="event: { mouseover: myFunction }">  
     Mouse over me  
 </div>  
    
  <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>  

即使绑定定义中函数不带任何参数，data和event两个参数总会被缺省传递，data指当前的viewModel对象，event为事件对象。

注意：在bind方式传递参数时，data和event两个参数依然被缺省传递，新加入的参数，在使用时排在第一位，例如，进行下面的定义：

[html] 
view plain
copy

 <span style="font-size:14px;"><div data-bind="click:changeEditor.bind($data,$index)"></div></span>  

在使用时，index 为第一个参数。

[javascript] 
view plain
copy

 function changeEditor(index,data, event){  
     alert('参数:'+ index + ',' + data+ "," + event);  
     alert(arguments.length);  
   
      var tmp = data;  
      tmp.headerText = 'OK!!!';  
      tmp.editing = true;  
     // columns2[idx](tmp);  
 }  