title: Binding view with javascript knockout
body: <p>Here i have my get method that gets the data that i want to return in order to bind it with the view page. I am having trouble wrapping my head to how i could bind this information to the view. </p>
  
  <p><strong>Get Method:</strong></p>
  
  <pre><code>var getRoster = function () {
      Ajax.Get({
          Url: ....,
          DataToSubmit: {id: properties.Id },
          DataType: "json",
          OnSuccess: function (roleData, status, jqXHR) {
  
              console.log("roles:", roleData.length);
  
              Ajax.Get({
                  Url: ...,
                  DataToSubmit: { pageNumber: 1, id: properties.Id },
                  DataType: "json",
                  OnSuccess: function (userData, status, jqXHR) {
  
                      for (var x in roleData)
                      {
                          var role = roleData[x];
                          console.log(role);
                          for (var y in userData)
                          {
                              var user = userData[y];
                              if (user.ContentRole == role.ContentRole)
                              {
                                   rosterViewModel.PushUser(new userViewModel(user));
                                   console.log(user);
                              }
                          }
                          roleTypesViewModel.PushRole(new roleViewModel(role));
                      }
                  } 
              });
          }
      });
  
   rosterViewModel.PushUser = function (user) {
          viewModel.RosterUsers.push(new userViewModel(user));
      };
  
  roleTypesViewModel.PushRole = function (role) {
          viewModel.RosterRoleTypes.push(new roleViewModel(role));
      }
  
  var userViewModel = function (data) {
          var _self = this;
          _self.ID = ko.observable(data.ID);
          _self.Name = ko.observable(data.Name);
          _self.Email = ko.observable(data.Email);
          _self.ContentRole = ko.observable(data.ContentRole);
      };
  
  var roleViewModel = function (data) {
          var _self = this;
          _self.ContentRole = ko.observable(data.ContentRole);
          _self.RoleName = ko.observable(data.RoleName);
          _self.RoleRank = ko.observable(data.RoleRank);
          _self.UserCount = ko.observable(data.UserCount);
      };
  
   var viewModel = {
          RosterRoleTypes: ko.observableArray([]),
          RosterUsers: ko.observableArray([])
      };
  </code></pre>
  
  <p><strong>View:</strong></p>
  
  <pre><code>&lt;div id="gridView" data-bind="foreach: RosterRoleTypes"&gt;
              &lt;h3 class="roleHeader"&gt;&lt;span data-bind="text:RoleName"&gt;&lt;/span&gt; 
                  &lt;span class="userCount"&gt;(&lt;span data-bind="text:UserCount"&gt;&lt;/span&gt;)&lt;/span&gt;
              &lt;/h3&gt;
  
              &lt;div data-bind="template: { name: 'grid', foreach: RosterUsers}"&gt;
  
              &lt;/div&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>How can i bind my data to display in my view?</p>