ノックアウトJsonネストされた子供 - ラジオ/チェックボックスにメニューを変更する

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を必ず使用する必要があります。

あなたは問題があるselectedLevelOne

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

次のようになり、そのラジオのために結合しているが、親です。このバインディングは次のように修正できます。

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

ラジオボタンを解決します。複数の選択肢を求めているので、チェックボックスは別の問題です。ここで、あなたはここで

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

を結合array-binding behavior ofcheckedを使用することができますラジオボタンの選択を示す、working fiddleで、チェックボックスは、配列を取り込みます。

親ラジオが変更されると、子選択配列が自動的に更新されないという問題があります。これを解決する1つの方法はサブスクリプション（これはフィドルです）です。

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