如何在 KnockoutJs 中呈现选定的依赖/绑定选项

Question

>我正在为依赖选项使用以下代码

.JS

this.packages = [
    {
        sku: "100",
        name: "Fruits",
        description: "its nice",
        locationOptions: [
            { location: "Orange", price: 20, subOptions: [{ quality: "Average", price: 5 }, { quality: "Imported", price: 4 }] },
            { location: "Apple", price: 30, subOptions: [{ quality: "Good", price: 5 }, { quality: "Imported", price: 5 }] },
            { location: "Banana", price: 5, subOptions: [{ quality: "Normal", price: 6 }, { quality: "Imported", price: 3 }] }
        ]
    }
]
this.selectedPackage = ko.observable();
this.selectedLocation = ko.observable();
this.subOptions = ko.observable('0');

我想使用

<b data-bind="text: name"></b>
<!-- ko with : $parent.selectedLocation -->> <b data-bind="text: location"></b>
<!-- ko with : $parent.subOptions --><b data-bind="text: quality"></b>
<!-- /ko  -->
<!-- /ko  -->

值显示到第二级(水果>苹果(，但第三级值(质量和价格(没有显示，任何人都可以告诉我我做错了哪里。

Answer 1

您似乎在错误的属性级别绑定到对象数据。我已经这样做是为了在下面向您展示您可能应该使用的视图模型，您现在可以看到所有级别的数据。

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-debug.js"></script>
<div>
<!-- ko with : $root.selectedPackage -->
<h1 data-bind="text: name"></h1>
    <!-- ko with : $root.selectedLocation -->
    <h2 data-bind="text: location"></h2>
    <div data-bind="foreach: subOptions">   
        <h3 data-bind="text: quality"></h3>
        <h3 data-bind="text: price"></h3>
    </div>
    <!-- /ko  -->
<!-- /ko  -->
</div>
<script>
var ViewModel = function() {
var self = this;
self.packages = [
    {
        sku: "100",
        name: "Fruits",
        description: "its nice",
        locationOptions: [
            { location: "Orange", price: 20, subOptions: [{ quality: "Average", price: 5 }, { quality: "Imported", price: 4 }] },
            { location: "Apple", price: 30, subOptions: [{ quality: "Good", price: 5 }, { quality: "Imported", price: 5 }] },
            { location: "Banana", price: 5, subOptions: [{ quality: "Normal", price: 6 }, { quality: "Imported", price: 3 }] }
        ]
    }
]
self.selectedPackage = ko.observable(self.packages[0]);
self.selectedLocation = ko.observable(self.packages[0].locationOptions[0]);
}
ko.applyBindings(new ViewModel());
</script>

这给出了如下输出：

#Fruits
##Orange
###Average
###5
###Imported
###4