title: Kendo UI "checked" MVVM binding not working for last radio button in external template
body: <p>I have quite interesting and disturbing problem to solve. I am working on project using MVVM Kendo UI pattern and I have issue with <code>data-bind: checked</code> for radio buttons.</p>
  
  <p>When I bind some variable from VM to view using <code>data-bind</code>, it is binded successfully for all radio buttons except the very last one. So whenever I change radio value to the last one - variable in VM is not changed and therefore no attached listeners to this variable are called.</p>
  
  <p>HTML view:</p>
  
  <pre><code>&lt;div data-role="modalview"
       class="dialogStyle width60em"
       data-hide="kitkat.widgets.zivotniPojisteniDialog.hide"
       data-model="kitkat.widgets.zivotniPojisteniDialog"
       data-init="kitkat.widgets.zivotniPojisteniDialog.init"&gt;  
  
      &lt;div class="dialogContainer kitkat-switches"&gt;
          &lt;form id="form"&gt;
              &lt;div data-role="scroller" class="scroller"&gt;
                  &lt;div class="row"&gt;
                      &lt;span data-bind="source: nameSource" data-template="name-tmpl"&gt;&lt;/span&gt;
                      &lt;script type="text/x-kendo-template" id="name-tmpl"&gt;
                          &lt;input type="radio" name="firstname" value="#= idx#" data-bind="checked: nameSelectedValue" 
                                     id="firstname#= idx#" /&gt;
                          &lt;label class="black" for="firstname#= idx#"&gt;#= name#&lt;/label&gt;
                      &lt;/script&gt;
                  &lt;/div&gt;
                  &lt;div id="tables"&gt;
                      &lt;!-- example tables, originally created by nested external templates --&gt;
                      &lt;table id="table0" data-bind="visible: firstnameChanged"&gt;
                          &lt;tr class="row"&gt;
                              &lt;td class="firstColumn"&gt;&lt;/td&gt;
                              &lt;td class="secondColumn"&gt;&lt;/td&gt;
                              &lt;td class="thirdColumn"&gt;&lt;/td&gt;
                          &lt;/tr&gt;
                      &lt;/table&gt;                               
                      &lt;table id="table1" data-bind="visible: firstnameChanged"&gt;
                          &lt;tr class="row"&gt;
                              &lt;td class="firstColumn"&gt;&lt;/td&gt;
                              &lt;td class="secondColumn"&gt;&lt;/td&gt;
                              &lt;td class="thirdColumn"&gt;&lt;/td&gt;
                          &lt;/tr&gt;
                      &lt;/table&gt;                               
                      &lt;!-- - - - - - - --&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/form&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>JS viewmodel:</p>
  
  <pre><code>&lt;script&gt;
  var _dialog = kendo.observable({
  
          // hardcoded data for this example
          nameSource: [
              {
                  "idx" : 0,
                  "name" : "John"
              },
              {
                  "idx" : 1,
                  "name" : "George"
              }
          ],
          nameSelectedValue: null, // problematic variable
  
          init: function(e) {
              var self = _dialog;
              self._view = e.sender;
              self._view.shim.popup.options.animation.open.effects = "slideIn:down";
              $(self._view.element).closest('.km-shim').addClass('dialogs-shim');
  
              self.initView("form");
  
              self.bind("closed", function() {self.hide();});
          },
          show: function(jeProDeti) {
              var self = _dialog;
              self._view.open();  
          },
          hide: function() {
          },
          cancel: function() {
              kitkat.touch( function() {
                  var self = _dialog;
                  self.trigger('done');
                  self._view.close();
                  self.trigger('closed');
              });
          },
  
          firstnameChanged: function(e) {
              var self = _dialog;
              var idx = e.idx;
              var selectedIdx = parseInt(self.get("nameSelectedValue")); // getter for registering "nameSelectedValue" change
  
              if(idx === selectedIdx) { // table is visible if corresponding radio value is selected
                  return true;
              }
              return false; // otherwise it is invisible
          }
  
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>Thank you for any advice</p>