为什么我的 KendoUI 移动开关无法正常工作？答案

【问题标题】：Why is my KendoUI mobile switch not working correctly?为什么我的 KendoUI 移动开关无法正常工作？
【发布时间】：2012-07-01 11:13:39
【问题描述】：

我正在使用 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>

【问题讨论】：

看起来与 FubuMVC 恕我直言无关，但我对“.data('kendoMobileSwitch');”有点好奇后缀。如果它在创建后的元素上调用自身，我可能会尝试不使用它。

标签： jquery kendo-ui fubumvc

【解决方案1】：

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

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

【讨论】：

我在页面底部的应用程序 spark 中有 kendo init 应用程序。我在这个方法中添加了一些基本的日志记录来验证代码没有被运行两次。据我所知，它看起来只运行一次。
您应该确保您的 Switch init 在应用程序初始化后运行 - Switch on init 会为其自身添加一个数据角色，并且可能应用程序决定再次对其进行初始化。为确保应用程序已启动，您可以使用例如视图初始化事件。
这行得通 - 我修改了我的自定义 jquery 逻辑并将其从 document.ready 函数移动到普通函数，并在调用 kendo.mobile.application 函数后调用它。工作就像一个魅力 - 非常感谢！