녹아웃 및 시맨틱 UI 다중 모델에서 컬렉션으로 사전 선택된 값이있는 드롭 다운 선택

Question

녹아웃 및 시맨틱 UI 사용. 멀티 선택 드롭 다운에 선택된 값을 가져 오는 방법을 알아 내려고하고 있습니다. 첫 번째 드롭 다운은 단일 값으로 작동하지만 멀티 선택 하나의 dosent.

<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> 

내가 그것을에서 그룹 모델과 역할의 컬렉션을 가지고 하나의 모델 groupuser이 : 나는 다른 모음 내부 관찰 배열을 가지고있다.

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

나는이 기능을 사용하여 데이터를 추가

$(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

나는 숨겨진 입력에서 데이터 바인딩에 사용자 정의 바인딩에 추가 결국 그것은했다. 하지만 이제는 값을 추가하거나 제거 할 때 구독료가 부과됩니다. 작동 한 코드 :

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) 

      } 
     }); 

    } 
};