녹아웃 : 나는 녹아웃을 사용하고

을 선택하고 내가 항목의 목록을 때 다른 다중 선택 컨트롤에서 하나 개의 요소를 제거 가정 해 봅시다 :녹아웃 : 나는 녹아웃을 사용하고

Tomato, 
Potato, 
Broccoli, 
Bean

모든 항목은 다중 선택 양식에서 선택하도록 사용자에게 허용 -제어.

<select class="form-control" multiple 
    data-bind="selectPicker: Types, 
    optionsText: 'Name', 
    optionsValue: 'VegetableTypeId', 
    selectPickerOptions: { optionsArray: AvailableVegetableTypes }"> 
</select>

한 가지 시나리오를 제외하고 - 사용자가 토마토를 선택하면 감자는 선택을 취소해야합니다. 내가 선택한 항목의 배열에 구독을 사용하려고 시도했다 :

this.Types.subscribe(changes => { 
     var VegetableTypes = this.AvailableVegetablesTypes(); 
     var company = VegetableTypes.First(element => element.VegetableTypeId == changes[0].value); 
     if (changes[0].status == "added") { 
      if (Vegetable.IsTomato) { 
       this.Types.remove(element => 
        VegetableTypes.First(baseElement => 
         baseElement.VegetableTypesTypeId == element && baseElement.IsPotato)); 
      } else if (Vegetable.IsPotato) { 
       this.Types.remove(element => 
        VegetableTypes.First(baseElement => 
         baseElement.VegetableTypesTypeId == element && baseElement.IsTomato)); 
      } 
     } 
    }, null, "arrayChange");

문제는 현재 실행이 마무리되기 전에 다시 내 함수를 호출 그래서 내가, ObservableArray.Remove을 사용하고 있다는 점이다. 첫 번째 변경을 제거한 후에는 "삭제"유형이므로 전체 논리가 실행되지 않아야하므로 문제가되지 않습니다.

하지만 나중에 토마토/감자를 다시 선택하면 아무 것도 해고되지 않습니다. 결국 나는 실제로 토마토와 감자를 모두 선택했습니다. 그런 다음이 두 옵션 중 하나를 선택 취소하고 다시 선택하면 모든 것이 올바르게 작동하고 전체 상황이 반복됩니다.

의견이 있으십니까?

출처

2015-01-21 Thaven

보통 options 및 selectedOptions 바인딩 available in Knockout 대신 selectPicker 바인딩을 사용하는 이유를 알지 못했습니다.

그러나 원하는 동작을 구현하는 간단한 데모를 만들었습니다. 당신은 여기에서 찾을 수 있습니다

http://jsbin.com/fofojaqohi/1/edit?html,js,console,output

하는 것으로, 당신은 감자 후 토마토를 선택할 때마다, 감자는 선택되지 않은 될 것입니다.

올바른 길을 가고 있습니다 : 선택한 항목의 배열을 구독하고 잘못된 선택 항목이 있는지 확인해야합니다. 이게 도움이 되길 바란다.

HTML :

<select class="form-control" multiple="true" 
    data-bind="options: availableVegetableTypes, selectedOptions: selected"> 
</select>

JS :

var availableVegetableTypes = ['Tomato', 
'Potato', 
'Broccoli', 
'Bean']; 

var selected = ko.observableArray(); 

var unselectMap = { 
    'Tomato': 'Potato' 
}; 

selected.subscribe(function(selectedOptions){ 
    var keysToUnselect = []; 
    console.log("Selected", selectedOptions); 
    selectedOptions.forEach(function(selectedOption){ 
    if (unselectMap[selectedOption] != null) { 
     // This key exists in the unselect map 
     // Let's check if the value is in the array 
     if (_.contains(selectedOptions, unselectMap[selectedOption])) { 
     // The invalid key exists. Let's mark it for removal. 
     keysToUnselect.push(unselectMap[selectedOption]); 
     } 
    } 
    }); 
    if (keysToUnselect.length > 0) { 
    console.log("Unselect", keysToUnselect); 
    var reject = function(v){ 
     return _.contains(keysToUnselect, v); 
    }; 
    filteredSelectedOptions = _.reject(selectedOptions, reject); 
    console.log("Filtered", filteredSelectedOptions); 
    selected(filteredSelectedOptions); 
    } 
}); 

ko.applyBindings({ 
    availableVegetableTypes:availableVegetableTypes, 
    selected: selected 
});

참고로

, 여기 코드

출처

2015-01-23 12:35:08 firstdoit

녹아웃 : 나는 녹아웃을 사용하고

답변

관련 문제