knockoutJS를 사용하여 다중 선택 목록을 만드는 방법

Question

KnockoutJS를 사용할 때 jQuery selectable list의 기능을 갖기 위해 노력하고 있지만 제대로 작동하지는 않습니다.

사용자 지정 바인딩을 사용하여 선택 가능한 요소에서 ul 요소를 변형하고 선택한 이벤트와 선택되지 않은 이벤트에 대한 이벤트 처리기를 만드는 데 성공했습니다. 하지만 선택한 요소를 유지 관리하는 ViewModel 함수에는 무엇을 전달해야합니까? http://jsfiddle.net/QCmJt/

나는 어쩌면 나는이 잘못된 방향으로 접근하고,이 모든 새로운 오전 ...

이

Answer 1

좋아, 내가 바운드 데이터를 전달할 수있는 방법을 생각 : 여기

지금까지 내 코드입니다 선택 항목으로

$(ui.selected).tmplItem().data 선택할 때 선택하고 $(ui.selected).tmplItem().data을 선택 해제 할 때. http://jsfiddle.net/8RnxC/

사용자 정의 바인딩 외모와 같은 :

ko.bindingHandlers.selectable = { 
     init: function(element, valueAccessor) { 
      $(element).attr("id", "selectable").selectable({ 
       selected: function(event, ui) { 
        vm.selectRequest($(ui.selected).tmplItem().data); 
       }, 
       unselected: function(event, ui) { 
        vm.unselectRequest($(ui.unselected).tmplItem().data); 
       } 
      }); 
     } 
    }; 

그리고 내보기 모델 : 여기에 업데이트 된 바이올린

여기

function viewModel() { 
     // Data 
     this.requests = ko.observableArray([]); 
     this.selectedRequests = ko.observableArray([]); 

     // Behaviours 
     this.selectRequest = function(request) { 
      this.name = "othername"; 
      // Add to array if not already there. 
      if ($.inArray(request, this.selectedRequests()) === -1) { 
       this.selectedRequests().push(request); 
      } 
      var self = this; 

     }; 
     this.unselectRequest = function(request) { 
      // Remove from the array. 
      this.selectedRequests().splice($.inArray(request, this.selectedRequests()), 1); 
     }; 
    }; 

Answer 2

은 약간은 당신 하나를 수정 그것도 잘 작동합니다. 배열의 각 항목에 대해 선택한 속성을 사용하여 양방향 통신을 수행 할 수 있습니다. 선택한 항목의 목록 일 뿐인 속성을 원한다면 항상 종속 관찰 가능을 만들거나 필터링 할 수있는 방법을 만들 수 있습니다.

http://jsfiddle.net/QCmJt/32/

바인딩 사용자 정의 만든 :

ko.bindingHandlers.selectableItem = { 
    init: function(element, valueAccessor, allBindingsAccessor) { 
     var selectable = $(element).parent(); 

     selectable.bind('selectableselected', function(event, ui) { 
      if(ui.selected === element) {     
       var value = valueAccessor(); 

       value(true); 
      } 
     }); 

     selectable.bind('selectableunselected', function(event, ui) { 
      if(ui.unselected === element) {     
       var value = valueAccessor(); 

       value(false);     
      } 
     }); 
    }, 
    update: function(element, valueAccessor, allBindingsAccessor, viewModel) { 
     var el = $(element); 

     if(valueAccessor()()) { 
      el.addClass('ui-selected'); 
     } else { 
      el.removeClass('ui-selected'); 
     } 
    } 
}; 

그것은 매우 간단한 양방향 바인딩 이상 강화 아니에요,하지만에 구축 할 정도로 쉬워야한다.