0

実行時にイベントとイベントハンドラーをアタッチするjqueryプラグインを作成しています。

HTML：

<table id="digitalInputsTable">
<thead>
    <th>Name</th>
    <th>Value</th>
    <th>State</th>
    <th>Enabled</th>
    <th>Polarity</th>
    <th>Ignore Reset</th>       
</thead>
<tbody>
    <tr>      
        <td>
            <span class="">Name1</span>     
        </td>
        <td>
            <span class="">0</span>
        </td>
        <td>
            <span class="">Normal</span>
        </td>
        <td>
            <input type="checkbox" value="true" class="" jqmon="0" jqreg="0" id="digitalInputsTable_checkbox_03">
        </td>
        <td>
            <select class="" jqmon="0" jqreg="0" id="digitalInputsTable_select_04">
                <option value="0=Alarm">0=Alarm</option>
                <option value="1=Alarm">1=Alarm</option>
            </select>     
        </td>
        <td>          
            <input type="checkbox" value="true" class="" jqmon="0" jqreg="0" id="digitalInputsTable_checkbox_05">       
        </td>
    </tr>
</tbody>

データ構造：

$("#digitalInputsTable").bindEvents({
    parentControl: "digitalInputsTable",
    controls: [
        {   
            id: undefined, 
            name: "checkbox", 
            idStartsWith: "digitalInputsTable_checkbox_",               
            event: "click", 
            callbackHandler: "checkboxCallback"             
        },
        {
            id: undefined,
            name: "checkbox",
            idStartsWith: "digitalInputsTable_checkbox_",
            event: "blur",
            callbackHandler: "blurCallback"
        },
        {
            id: undefined,
            name: "select", 
            idStartsWith: "digitalInputsTable_select_",                 
            event: "change", 
            callbackHandler: "selectCallback"               
        }
    ]   
});

プラグイン：

$.fn.bindEvents = function(options) {           
for(var i = 0; i < options.controls.length; i++) {      
    var control = options.controls[i];
    switch(control.name) {
        case "checkbox":
            control.name = ":checkbox";
            break;          
    }

    if(control.id) {
        // find control by ID.
        // Attach event to the control.
    }
    else if(control.idStartsWith) {         
        $("#" + options.parentControl).find(control.name + "[id^=" + control.idStartsWith + "]")
                                    .bind(control.event, function(e) {                                          
                                        function(ctrl) {                                                
                                            eval(ctrl.callbackHandler + "();");
                                        };                                          
                                    }(control));
    }
};

};

問題：
チェックボックスをオンにすると、チェックボックスの「checkboxCallback」コールバック関数を呼び出すことができません。クロージャーを誤って使用している可能性があります。お知らせ下さい。

4

1 に答える 1

1

これは完全な答えではありませんが、正しい方向に向ける必要があります。基本的に、 をループしoptions.controlsて将来それらに対してアクションを実行する必要がある場合は、クロージャーを使用してそれらを分離する必要があります。

$.fn.bindEvents = function(options) {
    // loop through the controls
    for (var i = 0, control; control = options.controls[i]; ++i) {
        // close over the current item
        (function(ctrl) {
            // you can safely use ctrl now

            // call the callback like so
            ctrl.callbackHandler();
        }(control));
    }
};

evalところで、コールバックを呼び出すために使用しないでください。関数参照を渡すだけです。

callbackHandler: checkboxCallback

$.fn.bindEvents関数内で呼び出す方法の例を追加しました。

于 2012-05-31T10:53:23.650 に答える