Need help in using Mapping Plugin

https://groups.google.com/d/topic/knockoutjs/mxmkBvek_tA/discussion

by beej

HTML

<script src="http://knockoutjs.com/downloads/knockout-2.1.0.js"></script>
<script src="https://rawgithub.com/SteveSanderson/knockout.mapping/master/build/output/knockout.mapping-latest.debug.js"></script>
<ul data-bind='template: { name: "applicationTemplate", foreach: Applications }'></ul>

<script type='text/html' id='applicationTemplate'>
    <li><span data-bind='text: Name'></span></li>
  <ul data-bind='template: { name: "roleTemplate", foreach: Roles }'></ul>      
  <span data-bind="text: SelectedRoleId"></span>
</script>

<script type='text/html' id='roleTemplate'>
  <li>
    <input type='radio' data-bind='
      attr: { value: Id, name: "roleFor" + $parent.Id(), id: "roleFor" + $parent.Id() + "_" + Id() }, checked: $parent.SelectedRoleId' />
    <label data-bind='text: Name, 
      attr: { for: "roleFor" + $parent.Id() + "_" + Id() }'></label>
  </li>        
</script>

JavaScript

var data = {
    'Applications': [
      { 'Id': 8, 'Name': 'Weather Predictor', 'SelectedRoleId': '1', 'Roles': [
          { 'Id': 1, 'Name': 'Meteorologist' },
          { 'Id': 2, 'Name': 'Farmer' },
          { 'Id': 3, 'Name': 'Pair of Dice' }               
        ]
      },
      { 'Id': 9, 'Name': 'Daily Crime Report', 'SelectedRoleId': 6, 'Roles': [
          { 'Id': 4, 'Name': 'Superhero' },
          { 'Id': 5, 'Name': 'Commissioner' },
          { 'Id': 6, 'Name': 'Journalist' }
        ]
      }
    ]       
  };

  var viewModel = ko.mapping.fromJS(data);

  ko.applyBindings(viewModel);