gpt4 book ai didi

javascript - 在多个列表中选中复选框时选择所有复选框

转载 作者:行者123 更新时间:2023-12-02 23:18:31 32 4
gpt4 key购买 nike

有一种情况,时间段列表在天下列出,并且该数据是动态来自服务器的。现在用户应该选择给定日期的所有时段。类似于 fiddle 。我正在尝试遵循 knockout documentation 上的示例但在此示例中,标题复选框不是动态的。同样,我如何维护多个列表的引用?

<ul class="header" data-bind="foreach: days">
<li>
<label>
<input type="checkbox" data-bind="attr: { id: 'chk' + id }"/>
<span data-bind="text: name"></span>
</label>
<ul data-bind="foreach: timeslots">
<li>
<label>
<input type="checkbox" data-bind="attr: { id: 'chk' + id }"/>
<span data-bind="text: name"></span>
</label>
</li>
</ul>
</li>

    function MyViewModel() {

this.days = ko.observableArray([
{ name:"Sunday", id:1 , timeslots : [{ name:"10:00 - 11:00", id:10},{ name:"10:00 - 11:00", id:11},{ name:"10:00 - 11:00", id:12}] },
{ name:"Monday", id:2 , timeslots : [{ name:"10:00 - 11:00", id:20},{ name:"10:00 - 11:00", id:21},{ name:"10:00 - 11:00", id:22}] },
{ name:"Tuesday", id:3 , timeslots : [{ name:"10:00 - 11:00", id:30},{ name:"10:00 - 11:00", id:31},{ name:"10:00 - 11:00", id:32}] },
{ name:"Wednesday", id:4 , timeslots : [{ name:"10:00 - 11:00", id:40},{ name:"10:00 - 11:00", id:41},{ name:"10:00 - 11:00", id:42}] },
{ name:"Thursday", id:5 , timeslots : [{ name:"10:00 - 11:00", id:50},{ name:"10:00 - 11:00", id:51},{ name:"10:00 - 11:00", id:52}] },
{ name:"Friday", id:6 , timeslots : [{ name:"10:00 - 11:00", id:60},{ name:"10:00 - 11:00", id:61},{ name:"10:00 - 11:00", id:62}] },
{ name:"Saturday", id:7 , timeslots : [{ name:"10:00 - 11:00", id:70},{ name:"10:00 - 11:00", id:71},{ name:"10:00 - 11:00", id:72}] }
]);
this.selectedDays = ko.observableArray([
{ id:1 , timeslots : [{ name:"10:00 - 11:00", id:10},{ name:"10:00 - 11:00", id:12}] },
{ id:2 , timeslots : [{ name:"10:00 - 11:00", id:21}] }
]);
}
ko.applyBindings(new MyViewModel());

我想要实现的功能是 knockout 文档链接中的示例2:选择/取消选择所有项目,但我不知道如何在我的场景。

最佳答案

最好将普通对象映射到某种可以首先具有可观察或计算属性的 View 模型。

那么,

  1. 您为每个timeslot提供一个observable bool checked属性,
  2. 您为每一提供一个可写计算 checked 属性

您当天的 checked 属性的 write 函数设置所有内部时间段。其read函数返回是否至少检查一个时隙。

最后,您创建一个 pureCompulated 状态,将 View 模型解析回纯 JavaScript 数据结构。为此,我首先过滤掉未检查的日子。然后,对于有检查时间段的每一天,我都会收集已检查项目的标签。

<小时/>

这是一个示例,仅抽象为 GroupItem 模型。您应该能够将其转换为您自己的格式。如果您需要更多帮助,请告诉我。

function Item(label) {
this.label = label;
this.checked = ko.observable(false);
}

Item.forLabel = str => new Item(str);

function Group(label, items) {
this.label = label;
this.items = items.map(Item.forLabel);

this.checked = ko.computed({
read: () => this.items.some(i => i.checked()),
write: val => { this.items.forEach(i => i.checked(val)); }
});
}

Group.prototype.toJS = function() {
// Define the format of your selected state here:
return {
label: this.label,
items: this.items
.filter(i => i.checked())
.map(i => i.label)
};
}


const groups = [
new Group("colors", [ "red", "green", "blue" ]),
new Group("directions", [ "up", "down" ])
];

const selection = ko.pureComputed(
() => groups
.filter(g => g.checked())
.map(g => g.toJS())
)

ko.applyBindings({ groups, selection });
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>

<ul data-bind="foreach: groups">
<li>
<label>
<input type="checkbox" data-bind="checked: checked">
<span data-bind="text: label"></span>
</label>
<ul data-bind="foreach: items">
<li>
<label>
<input type="checkbox" data-bind="checked: checked">
<span data-bind="text: label"></span>
</label>
</li>
</ul>
</li>
</ul>


<pre data-bind="text: JSON.stringify(selection(), null, 4)" style="background: #efefef; padding: 1rem;"></pre>

关于javascript - 在多个列表中选中复选框时选择所有复选框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57052258/

32 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com