Почему мой мобильный коммутатор 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>

Via JQuery Я прилагаю мобильный silder 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); 
    }); 
});

});

Я получаю переключатель, чтобы отображаться на странице, но когда он, кажется, связал себя несколько раз на странице. Однажды с настраиваемыми 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 IMHO, но мне мало любопытно узнать «.data ('kendoMobileSwitch'); суффикс. У меня может возникнуть соблазн попробовать это без этого, если он будет ссылаться на элемент post-creation. –

По какой-то причине он инициализирует дважды. Можете ли вы проверить, вызывается ли $ (document) .ready() дважды? Вы также инициируете мобильное приложение Kendo?

@Ian: data ('kendoMobileSwitch') содержит объект Switch, который он использует после.

источник

2012-06-30 06:36:45 Bundyo

У меня есть приложение kendo init в приложении искра у подножия страницы. Я добавил несколько базовых протоколов внутри этого метода, чтобы проверить, что код не запускается дважды. И насколько я могу сказать, похоже, что он работает только один раз. –

Вы должны убедиться, что ваш запуск коммутатора запускается после инициализации приложения. Включить init добавляет роль данных в себя и, вероятно, приложение решает снова инициализировать его. Чтобы убедиться, что приложение запущено, вы можете использовать, например, событие init. – Bundyo

Это сработало - я модифицировал свою пользовательскую логику jquery и перенес ее из функции document.ready в обычную функцию и вызвал ее после вызова функции kendo.mobile.application. Работал как шарм - огромное спасибо! –

Почему мой мобильный коммутатор KendoUI работает неправильно?

ответ

Смежные вопросы