敲除嵌套计算属性在页面加载时绑定，但在父计算属性更新后失败

Question

我正在尝试创建一个菜单，当您单击代表多个组之一的按钮时，会出现一张图像，显示最受欢迎的产品。我知道这可以更简单地完成，但我正在尝试使用现有的数据模型。

我正在尝试将 img 元素绑定到属性 (ProductImageUrl)，该属性是嵌套 ko.computed 对象 (MostPopularProduct) 的属性，它是父 ko.computed 对象 (SelectedGroup) 的属性。

viewModel.SelectedGroup().MostPopularProduct().ProductImageUrl

当页面加载时，一切都按预期工作，数据绑定到图像工作正常。但是，当我单击 Group2 按钮时，出现以下数据绑定错误：

Uncaught TypeError: Unable to parse bindings.
Bindings value: attr:{src: SelectedGroup().MostPopularProduct().ProductImageUrl}
Message: undefined is not a function VM133:3

嵌套的 ko.computed 属性 MostPopularProduct() 有一个值并在页面加载时正确绑定，但是在单击按钮后，在父 Computed 属性更新后，嵌套的 ko.computed 属性 MostPopularProduct() 未定义。

我怀疑这个问题与 viewModel 属性的数据绑定有关，该属性是嵌套的 ko.computed 属性的属性。

这里是 jsfiddle： http://jsfiddle.net/boaldave/n5KQr/9/

<div id="GroupSelector">
    <img data-bind="attr:{src: SelectedGroup().MostPopularProduct().ProductImageUrl}">

    <ul id="Menu" data-bind="foreach:Groups">
        <li>
            <button data-bind="click: $parent.HandleButtonClick">
                <span data-bind="text: $data.GroupName"></span>
            </button>
        </li>
    </ul>
</div>

<script>

viewModel = {
    Groups: 
    [
        {
            GroupName:"Group1",
            MostPopularProductID: "Product1"
        },
        {
            GroupName:"Group2",
            MostPopularProductID: "Product2"
        }
    ],
    Products:
    [
        {
            ProductID: "Product1",
            ProductImageUrl: "http://placehold.it/100x100"
        },
        {
            ProductID: "Product2",
            ProductImageUrl: "http://placehold.it/200x200"
        }
    ]
};

// Since the data model above comes from a database, I extend the 
// viewModel properties with ko.observable and ko.computed properties:

viewModel.SelectedGroupName = ko.observable("Group1");

viewModel.SelectedGroup = ko.computed(function() {
    return ko.utils.arrayFirst(viewModel.Groups, function(item) {
        return item.GroupName === viewModel.SelectedGroupName();
        });
    }, viewModel);

viewModel.SelectedGroup().MostPopularProduct = ko.computed(function ()  {
    return ko.utils.arrayFirst(viewModel.Products, function (item) {
        return item.ProductID === viewModel.SelectedGroup().MostPopularProductID;
        });
    }, viewModel);

viewModel.HandleButtonClick = function(s, e) {
    viewModel.SelectedGroupName(s.GroupName);
};

var groupSelectorDiv = document.getElementById('GroupSelector');
if (groupSelectorDiv) {
    ko.applyBindings(viewModel, groupSelectorDiv);
}

</script>

Answer 1

JSFiddle：http://jsfiddle.net/jhmRc/

尝试改变

viewModel.SelectedGroup().MostPopularProduct = ko.computed(function ()  {

到

viewModel.SelectedGroup.MostPopularProduct = ko.computed(function ()  {

然后改变这个

<img data-bind="attr:{src: SelectedGroup().MostPopularProduct().ProductImageUrl>

到

<img data-bind="attr:{src: SelectedGroup.MostPopularProduct().ProductImageUrl}>

在您的示例中，您将 MostPopularProduct 分配给计算的值，这就是它在页面加载时起作用但在值更改后不起作用的原因。

第二种方式将其添加到计算对象本身