Мне трудно заставить мои нокаутные привязки переключателей работать с горизонтальной группой переключателей начальной загрузки.

Вот скрипка.

http://jsfiddle.net/LkqTU/27489/

Вот код.

 <h3>Works When I don't use the button groups</h3>

<input type="radio" name="processingType" value="Partial" data-bind="checked: ProcessingChoice" /> Partial
<input type="radio" name="processingType" value="Total" data-bind="checked: ProcessingChoice" /> Total
<input type="radio" name="processingType" value="OverUnder" data-bind="checked: ProcessingChoice" /> Over Under
<p>
    <br>The Choice is <strong><span data-bind="text: ProcessingChoice"></span></strong>

<hr>
    <h3>With Button Groups not so much</h3>

        <div class="btn-group" data-toggle="buttons">
            <label class="btn btn-default">
                <input type="radio" name="BootstrapprocessingType" value="Partial" autocomplete="off" data-bind="checked: BootstrapProcessingChoice">Partial</label>
            <label class="btn btn-default">
                <input type="radio" name="BootstrapprocessingType" value="Total" autocomplete="off" data-bind="checked: BootstrapProcessingChoice">Total</label>
             <label class="btn btn-default">
                <input type="radio" name="BootstrapprocessingType" value="Over Under" autocomplete="off" data-bind="checked: BootstrapProcessingChoice">OverUnder</label>
                </div>
                <div> <br>The Bootstrap Choice is <span data-bind="text: BootstrapProcessingChoice"></span></div>

Вот модель просмотра

var ViewModel = function () {
    this.ProcessingChoice = ko.observable("Total");
    this.BootstrapProcessingChoice = ko.observable("Total");
};

ko.applyBindings(new ViewModel());
0
Bryan Dellinger 28 Окт 2015 в 14:58

2 ответа

Лучший ответ

Поскольку button.js - это настраиваемый плагин bootstrap / jquery, вам нужна настраиваемая привязка. Не лучший, но сработает

ko.bindingHandlers.bsButtonChecked = {
    init: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
        var val = valueAccessor();
        $(element).on('change', function(e,v,c){
           val($(element).val()) 
        });

    },
    update: function(element, valueAccessor){
        var val = valueAccessor();
        var $parent = $(element).closest('[data-toggle="buttons"]')
        var all = $parent.find("input:radio");
        $.each(all, function(index,element){
           if($(element).val()==val()){
            $(element).trigger('click');
           }
        });
    }
};

Скрипка

0
Dandy 28 Окт 2015 в 13:28

Хорошо, спасибо, я заработал, используя один из других постов, пришлось немного изменить его.

<span class="btn-group dontshowwhenloading modelLoad">
                                                <!-- ko if: HasPartial -->
                                               <button data-bind="css: partialButtonCss, click: function () { ProcessingChoice('Partial') }" type="button" class="btn" value="Partial">Partial</button>
                                                <!-- /ko -->
                                                <!-- ko if: HasTotal -->
                                               <button data-bind="css: totallButtonCss, click: function () { ProcessingChoice('Total') }" type="button" class="btn" value="Total">Total</button>
                                                <!-- /ko -->
                                                <!-- ko if: HasVariance -->
                                                 <button data-bind="css: overUnderlButtonCss, click: function () { ProcessingChoice('OverUnder') }" type="button" class="btn" value="OverUnder">Over Under</button>
                                                <!-- /ko -->
                                            </span>
0
Bryan Dellinger 28 Окт 2015 в 13:10