Статьи

Как создать список кнопок-переключателей jQuery для мобильных устройств в переменной Knockout.js

Июль 27, 2018

Отрисовка списка радиокнопок с помощью jQuery Mobile довольно проста: вы просто пишете обычный список радиокнопок, применяете атрибут данных jQuery Mobile и получаете удобный список сенсорных радиокнопок.

RadioButton-группа

Его также можно отправить обратно в переменную Knockout.js, значение выбора также легко: просто примените проверенную привязку к переключателю.

Стандартный список радиокнопок с jQuery Mobile и Knockout.js

Это код, который превращает обычный список переключателей в горизонтальную группу jQuery Mobile с привязкой к переменной Knockout.js.

<fieldset data-role="controlgroup" data-type="horizontal">
  <label>
    <input type="radio" value="Yes" name='Vote'
      data-bind="checked: Vote" />Yes</label>
  <label>
    <input type="radio" value="No" name='Vote'
      data-bind="checked: Vote" />No</label>
  <label>
    <input type="radio" value="Abstain" name='Vote'
      data-bind="checked: Vote" />Abstain</label>
</fieldset>


<script type="text/javascript">
    viewModel = {
        Vote: ko.observable('Yes')
    };

    ko.applyBindings(viewModel);
</script>

Вы можете увидеть список переключателей на этой jsFiddle: http://jsfiddle.net/simonech/pyjV3/

К сожалению, этот код работает только в одном направлении: от HTML-элемента управления до переменной. Это не работает наоборот. Я объяснил причину, по которой в моем предыдущем посте в блоге рассказывалось о двухсторонней привязке мобильного переключателя jQuery к переменной Knockout.js . Решение проблемы также то же, что и с помощью переключателя: требуется специальная привязка , чтобы Knockout.js знал, как обновить пользовательский интерфейс списка переключателей, когда связанная переменная меняет значение.

Пользовательская привязка для радио кнопки

В действительности настраиваемая привязка применяется не к переключателям, а к группе управления, которая их содержит. Давайте сначала посмотрим код, а затем я объясню, что он делает. Вы можете видеть, как это работает на http://jsfiddle.net/simonech/cQaDm/1/ .

ko.bindingHandlers.jqCheckboxRadio = {
    init: function(element, valueAccessor) {
        var currentValue = valueAccessor();
        $(element).controlgroup(currentValue);
        $(element).attr("data-role", "controlgroup");
        $( "input[type='radio']",element).on( "checkboxradiocreate",
            function( event, ui ) {$(element).data( "init", true )} );
    },
    update: function(element, allBindingsAccessor) {
        var currValue = allBindingsAccessor().value();
        var initialized = $(element).data( "init");
        if(initialized){
            $("input[type='radio']",element).prop( "checked", false )
                .checkboxradio( "refresh" );
            $("input[type='radio'][value='"+currValue+"']",element)
                .prop( "checked", true ).checkboxradio( "refresh" );
        }
    }
};

По сравнению с переключателем , эта привязка немного проще, но она должна обходить ошибку в jQuery Mobile API для виджета контрольной группы .

Инициализации метод

Метод init создает группу управления через API, вызывая метод .controlgroup с параметрами, указанными в привязке (например, чтобы сделать ее горизонтальной или мини-). Следующая строка, которая снова применяет атрибут data-role, заключается в обходе ошибки, которая не отображает закругленные углы.

Последняя строка метода init необходима для отслеживания того, когда все переключатели внутри группы управления инициализированы, в противном случае метод обновления завершится ошибкой, если он вызывается до их инициализации: это делается путем регистрации обратного вызова в событии checkboxradiocreate. checkboxradio jQuery Мобильный виджет .

Метод обновления

Этот метод немного проще: он просто проверяет, что переключатели инициализированы, сбрасывает все их проверенные свойства в false (для учета, когда значение переменной не определено), а затем «проверяет» переключатель, значение которого совпадает с значение связанной переменной.

Применение привязки к кнопкам HTML-радио

Последний шаг — применить привязку к коду HTML.

<fieldset data-bind="value: Vote, jqCheckboxRadio: { mini: 'true', type: 'horizontal' }">
    <label><input type="radio" value="Yes" name='VoteGroup'
        data-bind="checked: Vote" />Yes</label>
    <label><input type="radio" value="No" name='VoteGroup'
        data-bind="checked: Vote" />No</label>
    <label><input type="radio" value="Abstain" name='VoteGroup'
        data-bind="checked: Vote" />Abstain</label>
</fieldset>

Полная демонстрация

Вы можете просмотреть полную демонстрацию, где вы можете увидеть, как одна версия элемента управления работает только в одном направлении, а другая с настраиваемой привязкой работает и в другой, на jsFiddle: http://jsfiddle.net/simonech/ cQaDm / 2 /


33
Share: