에 표시하는 텍스트 배열이 <select>있습니다.
텍스트는 버전 번호가 다를 수 있으며 <select>최신 버전만을 기준으로 필터링하고 싶습니다 .
더 우아한 방법이 있다고 생각합니다 (제안 환영합니다) <select>. 체크 박스에 따라 2 초를 다른 가시성으로 설정하도록 선택했습니다.
코드는 해킹이지만 결과는 꽤 좋아 보입니다. 불행히도 버그가 있습니다.
각 배열에서 선택한 옵션을 나타내는 두 개의 관찰 가능 항목이 있습니다.
self.SelectedText = ko.observable();
self.SelectedUnique = ko.observable();
둘 다 구독이 있지만 두 구독에서 함께 연결할 수 없으므로 다음과 같이 하나를 다른 구독자로 선택했습니다.
self.SelectedUnique.subscribe(function (text) {
if (text) {
self.SelectedText(text);
}
});
그러나 동기화되지 않습니다.
시나리오 1 : 텍스트 1,2,3을 선택합니다. [OK] 시나리오 2 : 텍스트 2 선택; "최신 버전 만"확인
이로 인해 옵션 ( "선택…")이 표시되지 않습니다. 내가 원하는 것이 아닙니다.
더 나빠집니다.
시나리오 3 : 선택 취소; 텍스트 선택 3; 그런 다음 "최신 버전 만"을 다시 확인하십시오.
이제 선택한 선택 옵션이 필터링되지 않은 옵션 2 번을 선택하도록 설정됩니다.
아마도 간단한 문제가있을 것입니다. 나는 아마 그것을 작동시킬 수 없습니다. 다음은 바이올린입니다 : Fiddle : http://jsfiddle.net/h5mt51gv/6/
모든 도움과 제안에 감사드립니다!
귀하의 접근 방식을 간소화했습니다.
<select>계산 된 옵션 목록에 대한 바인드 ( visibleTextBatches)latestOnly) 의 상태에 따라 달라지며 전체 목록과 필터링 된 목록간에 효과적으로 전환됩니다.latestTextBatches)은 각 그룹의 최신 버전을 보유하는 또 다른 계산입니다.<select>저장 실제 선택된 TextBatch관찰에서 객체 ( selectedTextBatch)visibleTextBatches최신 선택 항목 TextBatch이 현재 항목이되도록하는에 대한 구독 이 있습니다. 목록이 필터링되지 않으면 아무 작업도 수행하지 않습니다.function TextBatch(data) {
this.textbatchId = data.textbatchId;
this.parentId = data.parentId;
this.version = data.version;
this.title = ko.observable(data.title);
}
function ViewModel() {
var self = this;
// read up on the mapping plugin, too
self.textBatches = ko.observableArray([
new TextBatch({textbatchId: 1, parentId: 1, version: 1, title: "TB1.1"}),
new TextBatch({textbatchId: 2, parentId: 1, version: 2, title: "TB1.2"}),
new TextBatch({textbatchId: 3, parentId: 3, version: 1, title: "TB2.1"})
]);
self.selectedTextBatch = ko.observable();
self.latestOnly = ko.observable(false);
self.latestTextBatchGroups = ko.computed(function () {
var latest = {};
ko.utils.arrayForEach(self.textBatches(), function (batch) {
if (!latest.hasOwnProperty(batch.parentId) ||
batch.version > latest[batch.parentId].version
) latest[batch.parentId] = batch;
});
return latest;
});
self.latestTextBatches = ko.computed(function () {
return ko.utils.arrayFilter(self.textBatches(), function (batch) {
return batch === self.latestTextBatchGroups()[batch.parentId];
});
});
self.visibleTextBatches = ko.computed(function () {
return self.latestOnly() ? self.latestTextBatches() : self.textBatches();
});
self.visibleTextBatches.subscribe(function () {
var selectedBatch = self.selectedTextBatch();
if (selectedBatch && self.latestOnly()) {
self.selectedTextBatch(
self.latestTextBatchGroups()[selectedBatch.parentId]
);
}
});
}
ko.applyBindings(new ViewModel());<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<div>
<select data-bind="
options: visibleTextBatches,
optionsText: 'title',
optionsCaption: 'Select...',
value: selectedTextBatch
" />
</div>
<div>
<input type="checkbox" id="chkLatestOnly" data-bind="checked: latestOnly" />
<label for="chkLatestOnly">Latest only</label>
</div>
<hr />
<pre data-bind="text: ko.toJSON($root, null,2)"></pre> 이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다