Knockout und Semantic UI Multi Wählen Sie Dropdown mit vorgewählten Werten mit einer Sammlung in einem Modell

Question

Verwenden Knockout und Semantic UI. Ich versuche herauszufinden, wie die Werte für mein Dropdown-Menü ausgewählt werden. Das erste Dropdown funktioniert mit nur einzelnen Werten, aber das Multi wählt ein Dosent. Ich habe eine beobachtbare Array innerhalb einer anderen Sammlung:

<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 ein Modell Gruppenbenutzer haben, die ein Gruppenmodell in ihm und einer Sammlung von Rollen aufweist.

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() 
} 

ich hinzufügen, die Daten mit dieser Funktion:

$(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); 
      }); 

Answer 1

Ich landete in einem benutzerdefinierten binden an die Daten-bind auf dem verborgenen Eingang addieren und es funktionierte. Aber jetzt funktioniert meine Subskriptionsdosierung, wenn ich Werte hinzufüge oder sie entferne. Code, der funktioniert:

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) 

      } 
     }); 

    } 
};