따라서 녹아웃 및 선택과 함께 사용중인 두 개의 드롭 다운 목록 (행당)이있는 테이블이 있습니다. 이미 선택된 선택된 옵션을 비활성화하거나 제거하고 싶습니다.
@Jason Spake 덕분에 Knockout / Select2 Dropdownlist에 올바른 옵션이 포함되어 있는 문제를 이해할 수 있었지만 이제는 선택된대로 아무것도 표시하지 않습니다 . 그러나 제공된 솔루션은 루트 모델을 자식 모델로 전달하고 싶지 않기 때문에 이상적이지 않았습니다. 누구든지 해결책을 찾는 데 도움을 줄 수 있습니까?
감사합니다!
항목을 모두 제거하는 대신 disabled 속성 을 사용하는 이전 질문의 아이디어를 사용하여 다른 스 니펫을 함께 던질 수있었습니다 . Knockout에는 생성 된 옵션에 대한 몇 가지 사후 처리를 수행 할 수있는 optionsAfterRender라는 편리한 선택 옵션 바인딩이 있습니다.
ko.bindingHandlers.select2 = {
init: function(element, valueAccessor, allBindingsAccessor, bindingContext) {
ko.utils.domNodeDisposal.addDisposeCallback(element,
function() {
$(element).select2('destroy');
});
var select2 = ko.utils.unwrapObservable(allBindingsAccessor().select2);
$(element).select2(select2);
},
update: function(element, valueAccessor, allBindingsAccessor, bindingContext) {
var allBindings = allBindingsAccessor();
if ("value" in allBindings) {
if ((allBindings.select2.multiple || element.multiple) && allBindings.value().constructor != Array) {
$(element).val(allBindings.value().split(',')).trigger('change');
} else {
$(element).val(allBindings.value()).trigger('change');
}
}
$(element).trigger("change");
}
};
function BookPossessionTransferVM() {
var self = this;
self.AllFromList = ([{ "IsAdult": false, "Name": "Bob", "ID": 38438 }, { "IsAdult": false, "Name": "Gordon", "ID": 54686 }, { "IsAdult": true, "Name": "Bill", "ID": 45645 }, { "IsAdult": false, "Name": "Sue", "ID": 1231 }, { "IsAdult": false, "Name": "Ling", "ID": 123578 }, { "IsAdult": false, "Name": "Ivy", "ID": 78945 }]);
self.AllToList = ([{ "IsAdult": false, "Name": "Adam", "ID": 38438 }, { "IsAdult": false, "Name": "Geoff", "ID": 54686 }, { "IsAdult": true, "Name": "Josh", "ID": 45645 }, { "IsAdult": false, "Name": "Sam", "ID": 1231 }, { "IsAdult": false, "Name": "Ming", "ID": 123578 }, { "IsAdult": false, "Name": "Austin", "ID": 78945 }, { "IsAdult": false, "Name": "Tsz", "ID": 78945 }, { "IsAdult": true, "Name": "Ireylnn", "ID": 78945 }, { "IsAdult": true, "Name": "Isabelle", "ID": 78945 }, { "IsAdult": true, "Name": "Vickey", "ID": 78945 }]);
self.PossessionChanges = ko.observableArray([]);
self.PossessionChanges.push(new PossessionChangeVM(self.PossessionChanges().length + 1));
self.GetPersonById = function(id) {
return ko.utils.arrayFirst(self.AllFromList, function(person) {
return person.ID === ko.unwrap(id);
});
}
self.UsedTo = ko.computed(function() {
return self.PossessionChanges()
.filter(function(item) {
return item.SelectedTo() != undefined;
})
.map(function(item) {
return item.SelectedTo();
});
});
self.UsedFrom = ko.computed(function() {
return self.PossessionChanges()
.filter(function(item) {
return item.SelectedFrom() != undefined;
})
.map(function(item) {
return item.SelectedFrom();
});
});
self.setOptionDisable = function(option, item) {
if (item)
ko.applyBindingsToNode(option, {
disable: item.disabled
}, item);
}
self.AvailableFrom = ko.computed(function() {
var available = self.AllFromList.slice();
for (var i = 0; i < available.length; i++) {
available[i].disabled = available[i].disabled || ko.observable(false);
available[i].disabled((self.UsedFrom().indexOf(available[i].ID) >= 0));
}
return available;
});
self.AvailableTo = ko.computed(function() {
var available = self.AllToList.slice();
for (var i = 0; i < available.length; i++) {
available[i].disabled = available[i].disabled || ko.observable(false);
available[i].disabled((self.UsedTo().indexOf(available[i].ID) >= 0));
}
return available;
});
self.addPossessionChange = function() {
self.PossessionChanges.push(new PossessionChangeVM(self.PossessionChanges().length + 1));
}
self.removePossessionChangeChange = function(possessionChange) {
self.PossessionChanges.remove(possessionChange);
}
}
function PossessionChangeVM(possessionChangeId) {
var self = this;
self.possessionChangeId = ko.observable(possessionChangeId);
self.SelectedFrom = ko.observable();
self.SelectedTo = ko.observable();
self.ChangeType = ko.pureComputed(function() {
if (self.SelectedFrom() !== undefined && self.SelectedTo() !== undefined) {
return 'Update';
} else if (self.SelectedFrom() === undefined && self.SelectedTo() === undefined) {
return '';
} else if (self.SelectedFrom() === undefined) {
return 'Add';
} else if (self.SelectedTo() === undefined) {
return 'Remove';
} else {
return '';
}
});
}
function SelectedPerson(isAdult, name, id) {
var self = this;
self.IsAdult = ko.observable(isAdult);
self.Name = ko.observable(name);
self.ID = ko.observable(id);
}
ko.applyBindings(new BookPossessionTransferVM());#tblPossessionChanges {
width: 70%;
height: 100px;
text-align: center;
table-layout: fixed;
}
#tblPossessionChanges td,
#tblPossessionChanges th {
padding: 1rem;
}
#tblPossessionChanges thead th {
text-align: center;
}
#tblPossessionChanges thead th:first-child {
text-align: left;
width: 10%;
}
#tblPossessionChanges tbody td:first-child {
text-align: left;
width: 10%;
}
#tblPossessionChanges>tbody>tr>td.prompt>a {
font-weight: bold;
}
#tblPossessionChanges tbody td select {
width: 75%
}<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.12/js/select2.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<div>
<table id="tblPossessionChanges">
<thead>
<tr>
<th><a href="#" class="buttonSmall" data-bind="click: addPossessionChange">Add</a></th>
<th>From</th>
<th>To</th>
</tr>
</thead>
<tbody data-bind="foreach: PossessionChanges">
<tr>
<td class="prompt">
<a href="#" class="buttonSmall" data-bind="click: $root.removePossessionChange">Delete</a> </td>
<td>
<select class="form-control"
data-bind="options: $root.AvailableFrom,
value: SelectedFrom,
optionsText: function(i) {return i.Name},
optionsValue: function(i) {return i.ID},
optionsCaption: 'Please select a Person...',
optionsAfterRender: $root.setOptionDisable,
select2: { placeholder: 'Please select a Person...', allowClear: false}">
</select>
</td>
<td>
<select class="form-control"
data-bind="options: $root.AvailableTo,
value: SelectedTo,
optionsText: function(i) {return i.Name},
optionsValue: function(i) {return i.ID},
optionsCaption: 'Please select a Person...',
optionsAfterRender: $root.setOptionDisable,
select2: { placeholder: 'Please select a Person...', allowClear: false}">
</select>
</td>
<td>
<span id="changeTypeSpan" data-bind="text: ChangeType"></span>
</td>
</tr>
</tbody>
</table>
<br/>
</div>이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다