0

我正在使用 FUBUMVC 并使用自定义 HTMLConvention 生成以下 htmltag(s)：

<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 移动 silder：

$(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);
    });
});

});

我正在让开关显示在页面上，但是当它似乎已经多次绑定到页面时。一次使用自定义的 onLabel 和 offLabel，另一次使用默认的“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

由于某种原因，它初始化了两次。你能检查 $(document).ready() 是否被调用了两次吗？您是否也启动了 Kendo 移动应用程序？

@Ian： data('kendoMobileSwitch') 包含他使用的 Switch 对象。

于 2012-06-30T06:36:45.767 回答