Binding child elements of another child element

Question

I have a object structure similar to following:

Customer
    --> Orders
       --> OrderItems

And here is the models and setup:

function Customer() {
    this.CustomerId = '';
    this.Name = '';
    this.Orders = ko.observableArray([new Order()]);
}

function Order() {
    this.OrderId = '';
    this.Name = '';
    this.OrderItems = ko.observableArray([new OrderItem()]);
}

function OrderItem() {
    this.CustomerItemId = '';
    this.Name = '';
}

function setup() {
    vm = {
        customer: ko.observable(new Customer())
    };
}

On a page, I have a list of Orders using knockout foreach. When one of the orders is clicked, I want the child OrderItems of the clicked Order to be displayed.

So far, I have trouble getting the clicked Order item and then passing it to the next screen and binding the child OrderItems of the clicked Order in the next screen.

If someone can help me produce a simple knockout binding this type of "nested" observableArray, it will help me a lot!

Thanks in advance!

Answer 1

Something like this?

 function Customer(data) { var self = this; self.CustomerId = data.id || ''; self.Name = data.name || ''; self.Orders = ko.observableArray([new Order({ id: 1, name: 'Order 1' })]); self.selectedOrder = ko.observable(); self.selectOrder = function(order){ self.selectedOrder(order)}; } function Order(data) { this.OrderId = data.id || ''; this.Name = data.name || ''; this.OrderItems = ko.observableArray([new OrderItem({ customerItemId: 1, name: 'Item 1' }), new OrderItem({ customerItemId: 2, name: 'Item 2' })]); } function OrderItem(data) { this.CustomerItemId = data.customerItemId || ''; this.Name = data.name || ''; } var vm = function () { var self = this; self.selectedCustomer = ko.observable(); self.customers = ko.observableArray([new Customer({ id: 1, name: 'Cust 1' })]); self.selectCustomer = function (item) { self.selectedCustomer(item); }; return self; }; ko.applyBindings(new vm()); 

 <link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.1/css/bootstrap.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> <div class='panel panel-primary'> <div class="panel-heading"> <h3 class="panel-title">Customers</h3> </div> <div class='panel-body'> <ul class="list-group" data-bind='foreach: customers'> <li class='list-group-item' data-bind="click: $root.selectCustomer"><span data-bind="text: CustomerId"></span> - <span data-bind="text: Name"></span> </li> </ul> </div> </div> <div class='panel panel-info' data-bind='with: selectedCustomer'> <div class="panel-heading"> <h3 class="panel-title">Orders for selected customer</h3> </div> <div class='panel-body'> <ul class="list-group" data-bind='foreach: Orders'> <li class='list-group-item' data-bind="click: $parent.selectOrder"><span data-bind="text: OrderId"></span> - <span data-bind="text: Name"></span> </li> </ul> </div> </div> <!-- ko if: selectedCustomer() --> <div class='panel panel-warning' data-bind='with: selectedCustomer().selectedOrder'> <div class="panel-heading"> <h3 class="panel-title">Items for selected order</h3> </div> <div class='panel-body'> <ul class="list-group" data-bind='foreach: OrderItems'> <li class='list-group-item'><span data-bind="text: CustomerItemId"></span> - <span data-bind="text: Name"></span> </li> </ul> </div> </div> <!-- /ko -->