javascript - Knockout and Semantic UI Multi Select Dropdown with pre-selected values with a collection inside a model -

using knockout , semantic ui. i'm trying figure out how values selected multi select dropdown. first dropdown works single values, multi select 1 dosent. have observable array inside collection:

 <tbody id="tbodyelement" data-bind="foreach: groupusercollection">             <tr>                 <td>                     <div class="ui selection dropdown fluid">                         <input type="hidden" name="groupdd" data-bind="value: group.name">                         <i class="dropdown icon"></i>                         <div class="default text">select group</div>                         <div class="menu" data-bind="foreach: $parent.groupcollection">                             <div class="item" data-bind="text: $data.name(), attr: {'data-value': $data.id()}"></div>                         </div>                     </div>                 </td>                  <td>                          <div class="ui multiple selection dropdown long-width" id="multi-select">                             <div data-bind="foreach: user">                                 <input type="hidden" name="userdd" data-bind="value: firstlastname">                              </div>                             <div class="default text">select user</div>                             <div class="menu" data-bind="foreach: $parent.usercollection">                                 <div class="item" data-bind="text: $data.firstlastname(), attr: {'data-value': $data.id()}"></div>                             </div>                             <i class="dropdown icon"></i>                     </div>                 </td>               </tr>         </tbody> 

i have 1 model groupuser has group model in , collection of roles.

var groupuser = function (data) {     var self = this;     self.group = ko.mapping.fromjs(data.group),         self.user = ko.observablearray([]),                  self.id = ko.observable(data.id),         self.group.subscribe = function () {             showbuttons();         },         self.user.subscribe = function () {           //  self.user.push(data.user);             showbuttons();         }  };  var group = function (data) {     var self = this;         self.id = ko.observable(data.id),         self.name = ko.observable(data.name),         self.project = ko.observable(data.project),         self.projectid = ko.observable(data.projectid),         self.role = ko.observable(data.role),         self.roleid = ko.observable(data.roleid)                 };     var user = function (data) {     var self = this;         self.id = ko.observable(data.id),         self.accountid = ko.observable(data.accountid),         self.email = ko.observable(data.email),         self.firstname = ko.observable(data.firstname),         self.lastname = ko.observable(data.lastname),             self.firstlastname = ko.purecomputed({              read: function()             {                 return self.firstname() + " " + self.lastname();             }             ,             write: function(value)             {                 var lastspacepos = value.lastindexof(" ");                 if (lastspacepos > 0) {                      self.firstname(value.substring(0, lastspacepos));                      self.lastname(value.substring(lastspacepos + 1));                  }                 console.log("firstname: " + self.firstname());             }          }),  };    groupviewmodel = {     groupusercollection: ko.observablearray(),     usercollection: ko.observablearray(),     groupcollection: ko.observablearray()  } 

i add data using function:

$(data).each(function (index, element) {                  var newgroup = new group({                     id: element.group.id,                     name: element.group.name,                     project: element.group.project,                     projectid: element.group.projectid,                     role: element.group.role,                     roleid: element.group.roleid                        });                 newgroup.id.subscribe(                     function () {                         newgroupuser.showbuttons();                     }                 );                 newgroup.name.subscribe(                     function () {                         newgroupuser.showbuttons();                     }                 );                   var newgroupuser = new groupuser({                     group: newgroup,                     id: element.id,                  });                  ko.utils.arrayforeach(element.user, function (data) {                     var newuser = new user({                         id: data.id,                         accountid: data.accountid,                         email: data.email,                         firstname: data.firstname,                         lastname: data.lastname,                     });                      newuser.id.subscribe(                         function () {                             newgroupuser.showbuttons();                         }                     );                     newuser.firstname.subscribe(                         function () {                             newgroupuser.showbuttons();                         }                     );                     newuser.lastname.subscribe(                         function () {                             newgroupuser.showbuttons();                         }                     );                     newgroupuser.user.push(newuser);                 });                   groupviewmodel.groupusercollection.push(newgroupuser);             }); 

i ended adding in custom bind data-bind on hidden input , worked. subscription dosent work when add values or remove them. code worked:

  ko.bindinghandlers.custommultibind = {      init: function (element, valueaccessor, allbindingsaccessor, viewmodel, bindingcontext) {         ko.utils.arrayforeach(bindingcontext.$data.user(), function (data) {             if (element.value === "")             {                 element.value = ko.utils.unwrapobservable(data.id)             }             else {                 element.value = element.value + "," + ko.utils.unwrapobservable(data.id)              }         });      } };