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"));

有没有人有关于从select转换为radio / checkbox的任何建议？

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

Answer 1

使用foreach绑定时，您正在创建一个新的绑定上下文（您可能也听说过它被称为＆＃34;范围＆＃34;）。您需要确保在退回时使用$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 of checked绑定

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

这是working fiddle，显示单选按钮选择，以及填充数组的复选框。

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

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

Knockout Json嵌套儿童 - 将选择菜单更改为收音机/复选框

1 个答案: