爲什麼我的KendoUI移動交換機無法正常工作？

我使用FUBUMVC和使用定製HTMLConvention生成以下htmltag（多個）：爲什麼我的KendoUI移動交換機無法正常工作？

<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>

來源

2012-06-29 Waylon Martinez

看起來無關FubuMVC恕我直言，但我對有些好奇「數據（‘kendoMobileSwitch’）;」後綴。如果它在元素創建後自行調用，我可能會試圖在沒有這個的情況下嘗試它。 –

出於某種原因，它初始化兩次。你可以檢查$（document）.ready（）是否被調用兩次？你是否也啓動了Kendo移動應用程序？

@Ian：數據（ 'kendoMobileSwitch'）包含他之後使用開關對象。

來源

2012-06-30 06:36:45 Bundyo

我在頁面底部的應用程序spark中擁有kendo init應用程序。我在這個方法中添加了一些基本的日誌記錄來驗證代碼沒有運行兩次。據我所知，看起來它只能運行一次。 –

您應該確保您的Switch init在應用程序初始化後運行 - 開啓init會爲其本身添加一個數據角色，並且應用程序可能決定再次初始化它。爲了確保應用程序已經啓動，您可以使用例如視圖初始化事件。 – Bundyo

這工作 - 我修改我的自定義jQuery的邏輯和移動它從一個功能的document.ready的正常功能，並把它稱爲kendo.mobile.application功能已被調用後。像魅力一樣工作 - 非常感謝！ –

爲什麼我的KendoUI移動交換機無法正常工作？

回答

相關問題