클릭하면 바인딩이 작동하지 않습니다. false를 반환합니다.

Question

확인 및 바인딩 바인딩에 문제가 있습니다.

여러 행을 선택하기 위해 check-listbox를 갖고 싶습니다. 마지막 값을 선택 취소 할 수 있기를 원합니다.

가장 좋은 것은 this입니다.

마지막 체크 상자를 클릭하면 선택이 해제되지 않지만 체크 된 바인딩은 여전히 ​​배열에서 마지막 값을 제거합니다.

모든 해결책을 제공해주세요.

HTML :

<div id="bookingResources" class="listcontrol"> 
    <!-- ko foreach:resources --> 
    <div class="li" data-bind="css:{ 'selected':$root.isResourceSelected($data) }"> 
    <a href="#" data-bind="click:$root.selectResource"> 
     <span data-bind="text:Name"></span> 
     <input class="right" type="checkbox" data-bind="click:$root.checkboxClick, clickBubble:false, value:Id, checked:$root.resourceIds"/> 
    </a> 
    </div> 
    <!-- /ko --> 
</div> 

JS :

var model = function(){ 
    var self = this; 

    self.resources = [{"Id":4612,"Name":"John"},{"Id":4613,"Name":"Tom"},{"Id":4614,"Name":"Marty"}]; 

    self.resourceIds = ko.observableArray([4612]); 

    self.isResourceSelected = function(resource) { 
      return self.resourceIds.indexOf(resource.Id) >= 0; 
    } 

    self.selectResource = function (resource) { 
     if (self.isResourceSelected(resource)) { 
      if (self.resourceIds().length > 1) { // the last not remove 
       self.resourceIds.remove(resource.Id); 
      } 
     } else { 
       self.resourceIds.push(resource.Id); 
     } 
    } 

    self.checkboxClick = function(resource) { 
    if (self.resourceIds().length != 1) 
     return true; 

    return self.resourceIds()[0] != resource.Id; 
    } 

    //subscribe 
    self.resourceIds.subscribe(function(newValue) { 
    console.log("Selected resorces (" + newValue.length + "): " + newValue); 
    }); 
} 

ko.applyBindings(new model(), document.getElementById("bookingResources")) 

Answer 1

좋아, 난의 녹아웃 소스 코드를 검색 바인딩을 확인하고 단순히 클릭 이벤트 HERE 결합되는 것을 발견했다.

그래서 checkbox 요소에서 eventPropagation을 중지하려면 jquery 만 필요합니다. 따라서 this function입니다.

self.checkboxClick = function(resource, event) { 
    if (self.resourceIds().length != 1) 
     return true; 

    if(self.resourceIds()[0] == resource.Id) 
    { 
     event.stopImmediatePropagation(); 
     return false; 
    } 

    return true; 
} 

:

함께 나는 현재의 클릭을 처리하지 않습니다 바인딩 그래서 확인, 이벤트 전파를 중지 할 수 있습니다