绑定另一个子元素的子元素答案

【问题标题】：Binding child elements of another child element绑定另一个子元素的子元素
【发布时间】：2014-12-03 14:15:23
【问题描述】：

我有一个类似于以下的对象结构：

Customer
    --> Orders
       --> OrderItems

这是模型和设置：

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())
    };
}

在一个页面上，我有一个使用淘汰赛 foreach 的订单列表。单击其中一个订单时，我希望显示所单击订单的子 OrderItems。

到目前为止，我无法获取单击的订单项，然后将其传递到下一个屏幕并在下一个屏幕中绑定单击的订单的子 OrderItems。

如果有人可以帮我制作一个简单的淘汰赛绑定这种“嵌套”observableArray，那对我有很大帮助！

提前致谢！

【问题讨论】：

标签： jquery knockout.js

【解决方案1】：

这样的？

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

【讨论】：