Knockout + Bootstrap 3 Radio Buttons



  • 3 Answer(s)

      The bootstrap buttons   binding are still not good.

    •     knockout uses the click event within the checked binding to tigger the underlaying observable to change
    •     Bootstrap subscribes on the click event to do the toggling but calls e.preventDefault() .that is why ko is not notice.

       Create a a custom binding handler will work where the user subscribe on the change event  and keep the  observables value there:

    ko.bindingHandlers.bsChecked =
    {
      init: function (element, valueAccessor, allBindingsAccessor,
      viewModel, bindingContext)
    {
        var value = valueAccessor();
        var newValueAccessor = function ()
    {
          return
    {
            change: function ()
    {
              value(element.value);
            }
          }
        };
        ko.bindingHandlers.event.init(element, newValueAccessor,
        allBindingsAccessor, viewModel, bindingContext);
      },
      update: function (element, valueAccessor, allBindingsAccessor,
      viewModel, bindingContext)
    {
        if ($(element).val() == ko.unwrap(valueAccessor()))
    {
          setTimeout(function ()
    {
            $(element).closest('.btn').button('toggle');
          }, 1);
        }
      }
    }
    

      And use it in the view with:

    <label class="btn btn-primary">
      <input type="radio" name="options" id="option1" value="1"
        data-bind="bsChecked: optionsValue"> Option 1
    </label>
    

    Example using Bootstrap 3.0.2 JSFiddle.

    Example using Bootstrap 3.2.0 JSFiddle.

    Answered on November 21, 2018.
    Add Comment

       Try this code:

    <div class="btn-group" data-toggle="buttons">
      <label data-bind="css: { active: !HideInLeaderboards() },
        click: function () { HideInLeaderboards(false); },
        clickBubble: false"
        class="btn btn-default">
       Show Name
      </label>
      <label data-bind="css: { active: HideInLeaderboards() },
        click: function () { HideInLeaderboards(true); },
        clickBubble: false" class="btn btn-default">
       Hide Name
      </label>
    </div>
    
    Answered on November 21, 2018.
    Add Comment

        Try  with the different handler will work.

      For ex:

    ko.bindingHandlers.bsChecked =
    {
      init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext)
    {
        var value = valueAccessor();
        var newValueAccessor = function ()
    {
          return
    {
            change: function ()
    {
              value(element.value);
            }
          }
        };
        if ($(element).val() == ko.unwrap(valueAccessor()))
    {
          $(element).closest('.btn').button('toggle');
        }
        ko.bindingHandlers.event.init(element, newValueAccessor, allBindingsAccessor, viewModel, bindingContext);
      }
    }
    
    Answered on November 21, 2018.
    Add Comment


  • Your Answer

    By posting your answer, you agree to the privacy policy and terms of service.