CODEWITHSUNDEEP
javascriptknockout.js
Krishna ijjada
Krishna ijjada

Reputation: 157

How to render the selected dependent/binding options in KnockoutJs

I am using below code for dependent options

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

I want to display selected values in Html by using

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

Values are are displaying up to second level (Fruits > Apple) but third level values (quality and price) are not showing, can any one please tell me where i am doing wrong.

Upvotes: 1

Views: 39

Answers (1)

onemorecupofcoffee
onemorecupofcoffee

Reputation: 2447

You seem to be binding to your object data at the wrong property levels. I've done it to show you below using View Model which you should probably be using and you can now see all levels of data.

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

This gives output like this:

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

Upvotes: 1

Related Questions