http://stackoverflow.com/questions/42812717/knockout-js-materializecss-pushed-selected-values-on-multiple-select-do-not-wo

by jlspake

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.1/knockout-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.4.1/knockout.mapping.min.js"></script>
<div class="input-field col s12">
    <select id="task_edit_assignees" data-bind="options: employees, selectedOptions: assignees, optionsValue: 'id', optionsText: 'name', optionsCaption: 'Choisissez un ou plusieurs employés'" multiple></select>
    <label for="task_edit_assignees">Assigner à</label>
</div>

<hr/>
<div>
  employees: <span data-bind="text: ko.toJSON(employees)"></span>
  <hr/>
  assignees: <span data-bind="text: ko.toJSON(assignees)"></span>
</div>

JavaScript

var testData = {
	id: 1,
  title: 'task 1',
  description: '',
  startDate: '1/1/1900',
  endDate: '',
  assignees: [
    {id: 11, name: 'assignee 2'}, 
    {id: 12, name: 'assignee 3'}, 
    {id: 14, name: 'assignee 5'}
  ]
};

var testEmployees = [
  {id: 10, name: 'assignee 1'}, 
  {id: 11, name: 'assignee 2'}, 
  {id: 12, name: 'assignee 3'}, 
  {id: 13, name: 'assignee 4'}, 
  {id: 14, name: 'assignee 5'}
];

function Assignee (data) {
    var self = this;
    self.id = ko.observable(data.id);
    self.name = ko.observable(data.name);
}

function Task (data) {
    var self = this;
    self.id = ko.observable(data.id);
    self.title = ko.observable(data.name);
    self.description = ko.observable(data.description);
    self.startDate = ko.observable(data.start);
    self.endDate = ko.observable(data.end);
    self.assignees = ko.observableArray($.map(data.assignees, function (item) {return new Assignee(item)}));
}

function TaskViewModel (task) {
    var self = this;
    self.id = ko.observable(null);
    self.title = ko.observable(null);
    self.description = ko.observable(null);
    self.task = ko.observable(task);
    self.employees = ko.observableArray([]);
    self.assignees = ko.observableArray([]);

    $.ajax({
    url: '/echo/json',
    type: 'POST',
    dataType: 'json',
    data: {},
    success: 
      function (data) {
      		data = testEmployees;
          self.employees($.map(data, function (item) {return new Assignee(item)}));
          if (task != undefined) {
              task.assignees().forEach(function(item, index, array) {
                  self.assignees.push(item.id());
              });
              //$('select#task_edit_assignees').material_select();
          }
      }
    });
};

ko.applyBindings(new TaskViewModel(new Task(testData)));