javascript - 绑定(bind)到主 View 模型中选定 subview 模型的ko.observableArray的 knockout js

在敲门js中，我有一个主视图模型，其中包含子视图模型的集合，如下所示

//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中，我有2个列表，更改第一个列表中的选择应该更改第二个列表的来源，但是当我更改列表中的选择时，什么也没有发生，并且当我在chrome中调试时，我得到了Uncaught ReferenceError: selectedSubViewModel is not defined

<!--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>

最佳答案

您的主要问题是您的selectSubViewModel和selectModel不正确地尝试设置您的selectedSubViewModel和selectedModel可观察对象。

正确的语法是：

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

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

另请参见文档：Reading and writing observables

但是，这不会使您的代码正常工作，因为第一次执行foreach: selectedSubViewModel.items绑定时，selectedSubViewModel将是null，并且KO将找不到selectedSubViewModel.items。

为了避免这种情况，您可以使用with binding包装您的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 -->

演示JSFiddle。

关于javascript - 绑定(bind)到主 View 模型中选定 subview 模型的ko.observableArray的 knockout js，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/20291915/