Javascript knockoutjs绑定到主视图模型中所选子视图模型的ko.observatarray

在knockoutjs中，我有一个主视图模型，它有一组子视图模型，如下所示

//apply binding on document ready
$( document ).ready(function() {
  ko.applyBindings(new MainviewModel);
});

//main view model, contains a child view models ko.observableArray
var MainviewModel = function()
{
    // ko.observableArray of subviewmodels
    this.subViewModels= ko.observableArray
    ([
        new SubViewModel('A'),
        new SubViewModel('B'),
        new SubViewModel('C')
    ]);

    //selected subviewmodel
    this.selectedSubViewModel = ko.observable();

    //set slected subviewmodel
    this.selectSubViewModel = function(subviewmodel)
    {
        this.selectedSubViewModel = selectedSubViewModel(subviewmodel);
    }
};

    //child view model, contains ko.observableArray of models
var SubViewModel = function(key)    
{ 
    this.key = key;   
    //load items from json based on key value...
    //ko.observableArray of subviewmodels
    this.items=ko.observableArray([new Model("car","4 wheels"), new Model("plane","can fly")]);
    //selected model
    this.selectedModel = ko.observable();
    //set selected model
    this.selectModel = function(item)
    {
        this.selectedModel = selectedModel(item);
    }
};

//model
var Model = function(word,defention)
{
    //properties
    this.word = word;
    this.defention = defention;
};

在我的html中，我有两个列表更改第一个列表中的选择应该更改第二个列表的源，但是当我更改列表中的选择时，什么都不会发生，当我在chrome中调试时，我得到

Uncaught ReferenceError:selectedSubViewModel未定义

<!--main view model list view-->
<div class="list-group" data-bind="foreach: subViewModels">
<a href="#" class="list-group-item" data-bind="css: {active: $parent.selectedSubViewModel() == $data}, click: $parent.selectSubViewModel.bind($parent)">
<h4 class="list-group-item-heading" data-bind="text: key"></h4>              
</a>
</div>

<!--selected sub view model list view-->
<div class="list-group" data-bind="foreach: selectedSubViewModel.items">  
     <a href="#" class="list-group-item" data-bind="css: {active: $parent.selectedModel() == $data}, click: $parent.selectModel.bind($parent)">
     <h4 class="list-group-item-heading" data-bind="text: word"></h4>
     <p class="list-group-item-text" data-bind="text: defention"></p>
     </a>
</div>

---

您的主要问题是您的

selectedSubViewModel

和

selectedModel

不正确地试图设置您的

selectedSubViewModel

和

selectedModel

可观察对象

正确的语法是：

this.selectSubViewModel = function(subviewmodel)
{
    this.selectedSubViewModel(subviewmodel);
}

this.selectModel = function(item)
{
    this.selectedModel(item);
}

另请参见文档中的：

但是，它不会使您的代码正常工作，因为当首次执行

foreach:selectedSubViewModel.items

绑定时

selectedSubViewModel

将为

null

，并且KO将找不到

selectedSubViewModel.items

为了避免这种情况，可以使用包装foreach。在这种情况下，仅当

selectedSubViewModel

中存在某些内容，并且您不必写入

selectedSubViewModel时，才会呈现第二个列表。someproperty

足以写入

foreach:items

等：

<!--selected sub view model list view-->
<!-- ko with: selectedSubViewModel -->
<div class="list-group" data-bind="foreach: items">  
     <a href="#" class="list-group-item" 
           data-bind="css: { active: $parent.selectedModel() == $data}, 
                      click: $parent.selectModel.bind($parent)">
     <h4 class="list-group-item-heading" data-bind="text: word"></h4>
     <p class="list-group-item-text" data-bind="text: defention"></p>
     </a>
</div>
<!-- /ko -->

演示