knockoutjs arrays

by willtx

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/2.1.0/knockout-min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-noty/2.0.0/jquery.noty.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-noty/2.3.0/jquery.noty.js"></script>
<script src="https://raw.githubusercontent.com/KanbanSolutions/jquery-tmpl/master/jquery.tmpl.js" type="text/javascritp"></script>

<div id="filterUserContainer" class="popup_style">
</div>

<div class="btn-group">
  <button id="btnFilterUsers" class="btn" type="button" aria-label="Filter Users" title="Add users to global filter">
    Filter &nbsp;<i class="fa fa-filter" aria-hidden="true"></i>
  </button>
  &nbsp;&nbsp;
  <a title="Clear User Filter" id="clearUserFilter" href="#" class="fa" aria-label="Clear User Filter">
    <span>Clear</span>
  </a>
</div>

<script id="FilterUsersSearchTemplate" type="text/html">
  <div id="filterDiv" style="min-width: 600px; padding: 10px;">
    <div width="100%">
      <span><b>Roles</b></span>
      <br/>
      <select id="ddlUserRoles" data-bind="options: userRoles, optionsValue: 'Id', optionsText: 'Name',
                                                 optionsCaption: '== Select a Role =='"></select>
    </div>
    <div width="100%" style="margin-top: 20px; border-top: solid 1px silver; padding-top: 10px;">
      <div id="availableUsers" style="float: left; width: 45%">
        <span><b>Available Users</b></span>
        <br/>
        <select id="ddlAvailableUsers" data-bind="options: availableUsers, optionsValue: 'id', optionsText: 'name'" style="min-width: 100px;" size="8" multiple="true"></select>
      </div>
      <div id="ddlButtons"...

CSS

i.fa.fa-times {
  color: #777;
}

a.fa {
  font-size: .9em;
}

a:hover {
  background: #eee;
  padding: 4px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  -khtml-border-radius: 5px;
}

#searchBar {
  min-width: 960px;
}

JavaScript

$(function() {

  //TODO remove
  debugger;

  var self = this;
  var baseQueueUri = '/LoanApplications/';
  var ddlData;

  //var endpoints = {
  //  getRoles: getAreaUrl(baseQueueUri + 'QueueFilterRoles'),
  //  getUsersByRole: getAreaUrl(baseQueueUri + 'QueueFilterUsers')
 // };

  // ReSharper disable once InconsistentNaming
  var FilterContainer = "#filterUserContainer";

  var getUsers = function(ids) {
    //// return $.getJSON(endpoints.getUsersByRole + '/' + ids);
    
     ddlData.availableUsers([{id: 111, name: 'User111'}]);

   // var resp = $.ajax({
  //    type: 'POST',
  //    url: endpoints.getUsersByRole,
  //    data: {
  //      ids: ids
  //    }
  //  });


  //  resp.done(function(data) {
  //      if (data.users) {
  //        ddlData.availableUsers(data.users);
  //        //$.each(data.users,
  //        //    function (index, user) {
  //        //        try {
  //        //            ddlData.availableUsers.push(user);
  //        //        } catch (e) {
  //        //            ddlData.availableUsers().push(user);
  //        //        } 

 //         //    });
 //       }
//      })
//      .fail(function(jqxhr, textStatus, error) {
//        var err = textStatus + ", " + error;
//        console.log("Request Failed, endpoints.getUsers: " + err);
//      });
  };

  $('#ddlUserRoles').on('change', function() {
    //console.log('selectedUserRole changed - jquery: %s', this.value);
    var text = $('#ddlUserRoles option:selected').text();
    var id = $('#ddlUserRoles option:selected').val();


    if (ddlData.availableUsers()) {
      ddlData.availableUsers.removeAll();
    }
    //else {
    //    ddlData.availableUsers().data = [];
    //}

    getUsers(id);
    return false;
    //var req = getUsers(id);


    //req.done(function (resp) {
    //    if (resp.roles) {
    //        //vm.userRoles.push(defaultRole);
    //        //vm.selectedUserRole = -1;
    //        $.each(resp.roles,
    //            function (index, role) {
...