gpt4 book ai didi

knockout.js - 在 foreach 中使用 if 绑定(bind)(KnockoutJS)

转载 作者:行者123 更新时间:2023-12-01 04:05:16 25 4
gpt4 key购买 nike

我已经发布了我的 question去knockoutJS论坛。但我不确定我是否会在今晚之前得到帮助。所以我发布了同样的问题:这有点紧急;我在等你的建议:

风景:

<select data-bind="foreach: groups"> 
<!-- ko if: false -->
<optgroup data-bind="attr: {label: label}, foreach: children">
<option data-bind="text: label"></option>
</optgroup>
<!-- /ko -->
<!-- ko ifnot: false -->
<option data-bind="text: label"></option>
<!-- /ko -->
</select>

JS:
function Group(label, children) { 
this.label = ko.observable(label);
this.children = ko.observableArray(children);
}

function Option(label) {
this.label = ko.observable(label);
}

var viewModel = {
groups: ko.observableArray([
new Group("Option All", null),
new Group("Group 1", [
new Option("Option 1"),
new Option("Option 2"),
new Option("Option 3")
]),
new Group("Group 2", [
new Option("Option 4"),
new Option("Option 5"),
new Option("Option 6")
]),
new Group("Group 3", [
new Option("Option 7"),
new Option("Option 8"),
new Option("Option 9")
])
])

};


ko.applyBindings(viewModel);

结果:
<select> 
<optGroup>Option All</optGroup>
<option>Option All</option>
<optGroup label="Group 1">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</optGroup>
<option>Group 1</option>
<optGroup label="Group 2">
<option>Option 4</option>
<option>Option 5</option>
<option>Option 6</option>
</optGroup>
<option>Group 2</option>
<optGroup label="Group 3">
<option>Option 7</option>
<option>Option 8</option>
<option>Option 9</option>
</optGroup>
<option>Group 3</option>
</select>

预期结果:
<select> 
<option>Option All</option>
<optGroup label="Group 1">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</optGroup>
<optGroup label="Group 2">
<option>Option 4</option>
<option>Option 5</option>
<option>Option 6</option>
</optGroup>
<optGroup label="Group 3">
<option>Option 7</option>
<option>Option 8</option>
<option>Option 9</option>
</optGroup>
</select>

因此,考虑到“结果”和“预期结果”之间的区别
我究竟做错了什么?即使我给“if”绑定(bind)提供静态值,比如
<!-- ko if: false -->” 具有约束力。

最佳答案

混合版本:选项和组
只有 Group 有属性 children,如果有属性 - group,如果没有,则 Option

<select data-bind="foreach: groups">
<!-- ko if: $data.hasOwnProperty('children') -->
<optgroup data-bind="attr: {label: label}, foreach: children">
<option data-bind="text: label"></option>
</optgroup>
<!-- /ko -->
<!-- ko ifnot: $data.hasOwnProperty('children') -->
<option data-bind="text: label"></option>
<!-- /ko --></select>

function Group(label, children) {
this.label = ko.observable(label);
this.children = ko.observableArray(children);}


function Option(label) {
this.label = ko.observable(label);}


var viewModel = {
groups: ko.observableArray([
new Option("Option All"),
new Group("Option All", [{"label": "Option without object"}]),
{"label":"OptionGroup Test", "children":[{"label":"label_1"},{"label":"lebel_2"}]},
new Group("Group 1", [
new Option("Option 1"),
new Option("Option 2"),
new Option("Option 3")
]),
new Option("Option only"),
new Group("Group 2", [
new Option("Option 4"),
new Option("Option 5"),
new Option("Option 6")
]),
new Group("Group 3", [
new Option("Option 7"),
new Option("Option 8"),
new Option("Option 9")
])
])};
ko.applyBindings(viewModel);

关于knockout.js - 在 foreach 中使用 if 绑定(bind)(KnockoutJS),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9903966/

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