Question

很难让我的淘汰赛单选按钮绑定与bootstrap水平单选按钮组一起使用。

这是小提琴。

这是代码。

 <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());

Answer 1

好的，谢谢，我使用其中一个帖子工作，不得不改变它。

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

Answer 2

由于buttons.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');
           }
        });
    }
};

Fiddle

bootstrap水平单选按钮组不与knockout js

2 个答案: