zoukankan      html  css  js  c++  java
  • Knockout 事件传递参数的方法

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

    要实现参数的传递,有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);
    }
  • 相关阅读:
    清空数据库所有表数据
    sqlserver编号
    Inherits、CodeFile、CodeBehind的区别
    初识NuGet
    ASP.Net各个命名空间及作用
    SQL SERVER数据库性能优化之SQL语句篇
    Exercise 20: Functions And Files
    Exercise 19: Functions And Variables
    Exercise 18: Names, Variables, Code, Functions
    Exercise 17: More Files
  • 原文地址:https://www.cnblogs.com/kennyliu/p/7268718.html
Copyright © 2011-2022 走看看