Я хочу отключить флажки для всех строк, кроме той, которую выбирает пользователь. Можно сделать только один выбор, и они должны иметь возможность отменить выбор, что снова включит другие флажки. В качестве отправной точки я создал простой пример. Я новичок в Knockout и застрял. Спасибо за любую помощь.
var DuplicatesVM = (function() {
var self = this;
self.Duplicates = ko.observableArray();
self.selectedItems = ko.observableArray([]);
});
var DuplicateVM = (function(data) {
var self = this;
//Map JS to Item
ko.mapping.fromJS(data, {}, self);
});
var rawData = {
"@odata.context": "Data",
"value": [{
"dos_personId": "c1",
"dos_lastname": "Smith",
"dos_firstname": "Joe",
"dos_name": "Smith, Joe ",
}, {
"dos_personId": "c2",
"dos_lastname": "Blow",
"dos_firstname": "Joe",
"dos_name": "Blow, Joe ",
}, {
"dos_personId": "c3",
"dos_lastname": "Davis",
"dos_firstname": "Joe",
"dos_name": "Davis, Joe ",
}]
};
$(document).ready(function() {
var DupVM = new DuplicatesVM();
$.each(rawData.value, function(k, l) {
//alert(JSON.stringify(l));
DupVM.Duplicates.push(new DuplicateVM(l));
});
ko.applyBindings(DupVM);
});
//* collapsible debug section script
var coll = document.getElementsByClassName("collapsible");
var i;
for (i = 0; i < coll.length; i++) {
coll[i].addEventListener("click", function() {
this.classList.toggle("active");
var content = this.nextElementSibling;
if (content.style.display === "block") {
content.style.display = "none";
} else {
content.style.display = "block";
}
});
}
/* Style the button that is used to open and close the collapsible content */
.collapsible {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
}
/* Add a background color if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active,
.collapsible:hover {
background-color: #ccc;
}
/* Style the collapsible content. Note: hidden by default */
.content {
padding: 0 18px;
display: none;
overflow: hidden;
background-color: #f1f1f1;
}
<script src = "https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.4.1/knockout.mapping.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<th>Option</th>
<th>ID</th>
<th>Name</th>
</tr>
</thead>
<tbody data-bind = "foreach: Duplicates">
<td>
<input type = "checkbox" data-bind = "checkedValue: $data, checked: $root.selectedItems"></intput>
</td>
<td data-bind = "text: dos_personId"></td>
<td data-bind = "text: dos_name"></td>
</tbody>
</table>
<div id = "debug" style = "clear: both">
<h2 class = "collapsible">Show Debug</h2>
<div class = "content" data-bind = "text: ko.toJSON($data)"></div>
<hr/>
</div>
Вы можете добавить привязку enable
с функцией проверки коллекции отмеченных элементов.
enable: $root.selectedItems().length===0 || $root.selectedItems().indexOf($data) >= 0
Пример:
var DuplicatesVM = (function() {
var self = this;
self.Duplicates = ko.observableArray();
self.selectedItems = ko.observableArray([]);
});
var DuplicateVM = (function(data) {
var self = this;
//Map JS to Item
ko.mapping.fromJS(data, {}, self);
});
var rawData = { "@odata.context": "Data", "value": [{ "dos_personId": "c1", "dos_lastname": "Smith", "dos_firstname": "Joe", "dos_name": "Smith, Joe ", }, { "dos_personId": "c2", "dos_lastname": "Blow", "dos_firstname": "Joe", "dos_name": "Blow, Joe ", }, { "dos_personId": "c3", "dos_lastname": "Davis", "dos_firstname": "Joe", "dos_name": "Davis, Joe ", }] };
$(document).ready(function() {
var DupVM = new DuplicatesVM();
$.each(rawData.value, function(k, l) {
//alert(JSON.stringify(l));
DupVM.Duplicates.push(new DuplicateVM(l));
});
ko.applyBindings(DupVM);
});
<script src = "https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.4.1/knockout.mapping.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<th>Option</th>
<th>ID</th>
<th>Name</th>
</tr>
</thead>
<tbody data-bind = "foreach: Duplicates">
<td>
<input type = "checkbox" data-bind = "checkedValue: $data, checked: $root.selectedItems, enable: $root.selectedItems().length===0 || $root.selectedItems().indexOf($data) >= 0" />
</td>
<td data-bind = "text: dos_personId"></td>
<td data-bind = "text: dos_name"></td>
</tbody>
</table>
@ilgy Звучит знакомо;)
Огромное спасибо. Я знал, что близок, но все усложнял. У меня есть ВСЕ скрипки, чтобы это доказать :-)