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


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


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


     要实现参数的传递,有2种方法:


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

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

 Mouse over me  

</div>

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


2、方法二:使用bind函数

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

 Click me  

</button>

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


3、缺省的参数传递

<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两个参数依然被缺省传递,新加入的参数,在使用时排在第一位,例如,进行下面的定义:


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

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

function changeEditor(index,data, event){  

 alert('参数:'+ index + ',' + data+ "," + event);  

 alert(arguments.length);  

  var tmp = data;  

  tmp.headerText = 'OK!!!';  

  tmp.editing = true;  

 // columns2[idx](tmp);  

}  



原文链接:https://blog.csdn.net/hongweigg/article/details/44020877


欢迎留言