Knockout Json Nested Children - 将选择菜单更改为单选/复选框

Question

我有一个工作版本的剔除代码，我在其中使用父选择菜单来确定子值应该是什么。

以下是示例： https://jsfiddle.net/mujaji/6zk5crn8/2/

我试图做的是将父级别变成收音机，将子级别变成复选框。

这是我尝试过的： https://jsfiddle.net/mujaji/tju15joe/4/

function ViewModel(items) {
    this.levelOne = ko.observableArray(items);
    this.selectedLevelOne = ko.observable();
    this.selectedLevelTwo = ko.observable();

    function getById(items, value) {
        if(!value) {
            return [];
        }

        var result = ko.utils.arrayFirst(items, function(item) {
            return item.value === value;
        });

        return result && result.childItems || [];
    }

    this.levelTwo = ko.computed(function(){
        var items = this.levelOne();
        var id = this.selectedLevelOne()
        return getById(items, id);
    }, this);

}

var items = [
{text: "Marvel Superhero", value: "1", childItems: [
    {text: 'Captain America', value: '01'},
    {text: 'Ironman', value: '02'},
    {text: 'Wolverine', value: '03'},
    {text: 'Nightcrawler', value: '04'},
    {text: 'Spiderman', value: '05'},
    {text: 'Hulk', value: '06'},
    {text: 'Thor', value: '07'},
    {text: 'Hawkeye', value: '08'},
    {text: 'Silver Surfer', value: '09'},
    {text: 'The Thing', value: '10'},
    {text: 'Mr Fantastic', value: '11'}
]},
{text: "Marvel Villian", value: "2", childItems: [
    {text: 'Dr. Doom', value: '01'},
    {text: 'Magneto', value: '02'},
    {text: 'Juggernaut', value: '03'},
    {text: 'The Blob', value: '04'},
    {text: 'Galactus', value: '05'}
]},
{text: "DC Superhero", value: "3", childItems: [
    {text: 'Superman', value: '01'},
    {text: 'Batman', value: '02'},
    {text: 'Robin', value: '03'},
    {text: 'Wonder Woman', value: '04'},
    {text: 'Raven', value: '05'},
    {text: 'Aquaman', value: '06'}
]},
{text: "DC Villian", value: "4", childItems: [
    {text: 'Lex Luthor', value: '01'},
    {text: 'Joker', value: '02'},
    {text: 'Grundy', value: '03'},
    {text: 'The Riddler', value: '04'},
    {text: 'Lobo', value: '05'}
]}
];

var module = {};

module.sampleViewModel = new ViewModel(items);

ko.applyBindings(module.sampleViewModel, document.getElementById("override-more"));

有人对从选择转换为单选/复选框有什么建议吗？

有没有更好的方法来做我正在尝试的事情？

Answer 1

当使用foreach 绑定时，您正在创建一个新的绑定上下文（您可能还听说过它称为“作用域”）。后退时请务必使用$parent 或$root。

你有一个看起来像这样的无线电绑定

<input type="radio" name="firstLevel" data-bind="checkedValue: value, checked: selectedLevelOne">

问题是selectedLevelOne 在父级上。您可以像这样修复此绑定：

<input type="radio" name="firstLevel" data-bind="checkedValue: value, checked: $parent.selectedLevelOne">

这将解决单选按钮。复选框是一个不同的问题，因为您要求进行多项选择。在这里，你可以使用array-binding behavior ofchecked绑定

<input type="checkbox" name="nextLevel" data-bind="checked: $parent.selectedLevelTwo, checkedValue: $data">

这是一个working fiddle，显示了单选按钮选择和填充数组的复选框。

一个问题是当父单选更改时，子选择数组不会自动更新。解决这个问题的一种方法是订阅（这在小提琴中）。

this.selectedLevelOne.subscribe(function(newValue) {
    this.selectedLevelTwo([])
}.bind(this))