javascript - 如何在 KnockoutJs 中渲染选定的依赖/绑定(bind)选项

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');

我想使用 Html 显示所选值

<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

您似乎在错误的属性级别绑定(bind)到对象数据。我这样做是为了在下面向您展示如何使用 View 模型，您可能应该使用它，并且您现在可以看到所有级别的数据。

<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