Knockstrap Binding Error

by jslowack

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="//test.railtour.delaware.be-local:90/App/Scripts/Lib/knockstrap/knockstrap.custom.js"></script>
<div class="container">
  <p class="text-info">Knockstrap's radio binding only sets the initial active class correctly when the value attribute is available. In example 1 &amp; 2 the value attribute is set on the input field before the radio binding is executed. In example 3 the value attribute is not yet created on the input field and the initial active class is not set on the label.</p>
</div>

<div class="container" data-bind="with: e1">
  <h4>Example 1: radio binding with static value attributes</h4>

  <div class="btn-group form-group" data-toggle="buttons" data-bind="radio: radioValue">
    <label class="btn btn-primary">
      <input type="radio" name="options" value="A" />A</label>
    <label class="btn btn-primary">
      <input type="radio" name="options" value="B" />B</label>
    <label class="btn btn-primary">
      <input type="radio" name="options" value="C" />C</label>
  </div>
  <div>Value of radiobutton: <span data-bind="text: radioValue"></span>

  </div>
</div>


<div class="container" data-bind="with: e2">
  <h4>Example 2: foreach binding first, radio binding last</h4>

  <div class="btn-group form-group" data-toggle="buttons" data-bind="foreach: radios, radio: radioValue">
    <label class="btn btn-primary">
      <input type="radio" name="options" data-bind="value: $data" /> <span data-bind="text: $data"></span>

    </label>
  </div>
  <div>Value of radiobutton: <span data-bind="text: radioValue"></span>

  </div>
</div>

<div class="container" data-bind="with: e3">
  <h4>Example 3: radio binding first, foreach binding last</h4>
  <div class="alert...

CSS

.container {
  margin-top: 15px;
}

JavaScript

function RadioExample() {
  this.e1 = new Example1();
  this.e2 = new Example2();
  this.e3 = new Example3();
}

function Example1() {
  this.radioValue = ko.observable("C");
}

function Example2() {
  this.radios = ["A", "B", "C"];
  this.radioValue = ko.observable("C");
}

function Example3() {
  this.radios = ["A", "B", "C"];
  this.radioValue = ko.observable("C");
}


ko.applyBindings(new RadioExample());