0

私はFUBUMVCを使用しており、カスタムHTMLConventionを使用して次のhtmltagを生成しています。

<div class="CheckboxWithValues">
<input type="checkbox" checked="true" name="Advertise_CheckboxWithValuesInput" checked_text="Yes" checked_value="37" unchecked_text="No" unchecked_value="38">
<input type="hidden" name="Advertise" value="37">
</div>

jQueryを介して、次のコードでKendoUIモバイルシルダーをアタッチしています。

$(document).ready(function () {
$('input[name$="_CheckboxWithValuesInput"]').each(function () {
    var input = $(this);
    var hiddenFieldName = input.attr("name").replace("_CheckboxWithValuesInput", "");
    var hiddenField = $('input[name="' + hiddenFieldName + '"]');
    var checked_value = input.attr('checked_value');
    var unchecked_value = input.attr('unchecked_value');

    //bind initial value
    if (input.is(':checked'))
        hiddenField.val(checked_value);
    else
        hiddenField.val(unchecked_value);


    //setup kendo UI switch
    var checked_text = input.attr('checked_text').toString();
    var unchecked_text = input.attr('unchecked_text').toString();
    var s = input.kendoMobileSwitch({ checked: input.is(':checked'), onLabel: checked_text, offLabel: unchecked_text }).data('kendoMobileSwitch');
    //bind change event
    s.bind('change', function (e) {
        var checked = e.checked;
        if (checked)
            hiddenField.val(checked_value);
        else
            hiddenField.val(unchecked_value);
    });
});

}）;

スイッチがページに表示されるようになっていますが、ページに何度かバインドされているように見える場合。1回はカスタマイズされたonLabelとoffLabelを使用し、もう1回はデフォルトの「ON」と「OFF」の値を使用します。

このページは次のようになります。

http://i.stack.imgur.com/sJzCm.jpg

他の誰かがこれに出くわしますか？

スイッチがコントロールに追加された後の変更されたhtmlは次のようになります。

<div class="CheckboxWithValues">
<span class="km-switch km-switch-on">
<span class="km-switch km-switch-on" style="">
<input type="checkbox" checked="true" name="Advertise_CheckboxWithValuesInput" checked_text="Yes" checked_value="37" unchecked_text="No" unchecked_value="38" data-role="switch">
<span class="km-switch-wrapper"><span class="km-switch-background" style="margin-left: -18px; "></span></span>
<span class="km-switch-container">
<span class="km-switch-handle" style="-webkit-transform: translateX(62px); ">
<span class="km-switch-label-on">ON</span>
<span class="km-switch-label-off">OFF</span>
</span>
</span>
</span>
<span class="km-switch-wrapper"><span class="km-switch-background" style="margin-left: -15px; "></span></span>
<span class="km-switch-container">
<span class="km-switch-handle" style="-webkit-transform: translate(65px, 0px); ">
<span class="km-switch-label-on">Yes</span>
<span class="km-switch-label-off">No</span>
</span>
</span>
</span>
<input type="hidden" name="Advertise" value="37">
</div>
4

1 に答える 1

0

何らかの理由で2回初期化されます。$（document）.ready（）が2回呼び出されているかどうかを確認できますか？剣道モバイルアプリも始めますか？

@Ian：data（'kendoMobileSwitch'）には、彼が後で使用するSwitchオブジェクトが含まれています。

于 2012-06-30T06:36:45.767 に答える