This is a migrated thread and some comments may be shown as answers.

two way binding in template nested in binding context

1 Answer 572 Views
MVVM
This is a migrated thread and some comments may be shown as answers.
Maxim
Top achievements
Rank 1
Maxim asked on 28 Jan 2013, 08:35 PM
Hi,

Is there a way enable two way binding on template referenced in MVVM binding context. I am looking to bind value of radio button to the value of the View Model.

Thanks
<form id="my-form" class="k-content">
        <ul id="pb" data-expand-mode="single" data-role="panelbar">
          <li class="k-state-active">
            <span class="k-link k-state-selected">Step 1</span>
            <div class="k-content">
              <div data-bind="text:name"></div>
              <ul data-template="row-template" data-bind="source: Reports">
              </ul>
            </div>
          </li>
        </ul>
    </form>
    <div id="view-model-state"></div>
    <script id="row-template" type="text/x-kendo-template">
        <li><span data-bind="text:Name"></span><input name="report" type="radio" data-bind="value:Value"/></li>
    </script>
MyApp.Ds = new function() {
  var self = this;
  self.Reports = [
    {Name: "R1", Value: 1},
    {Name: "R2", Value: 2},
    {Name: "R3", Value: 3},
  ];
};
 
MyApp.ViewModel = (function(){
  var vm = kendo.observable({
    name: "Nested Template Test",
    Reports: MyApp.Ds.Reports,
    Report: ""
  });
  vm.bind("change", function(e) {
      $("#view-model-state").html(JSON.stringify(vm.toJSON()));
    //console.log("change", vm.toJSON());
  });
  vm.bind("set", function(e) {
      $("#view-model-state").html(JSON.stringify(vm.toJSON()));
    //console.log("set", vm.toJSON());
  });
  return vm;
})();
 
$(function () {
  kendo.bind($("#my-form"), MyApp.ViewModel);
});

1 Answer, 1 is accepted

Sort by
0
Petur Subev
Telerik team
answered on 30 Jan 2013, 01:03 PM
Hello Maxim,

Binding the ViewModel to html elements including radio buttons/checkboxes is covered in this demo. 

http://demos.kendoui.com/web/mvvm/elements.html

I hope this elps.

If there is a specific issue we will be glad if you share a jsbin / jsfiddle link which describes it. 

Kind Regards,
Petur Subev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
MVVM
Asked by
Maxim
Top achievements
Rank 1
Answers by
Petur Subev
Telerik team
Share this question
or