Question

我有一个下拉列表，它是客户对象的主列表（从服务器填充的可用客户），旁边有一个添加按钮，它将客户添加到底部的表中，每行旁边都有删除按钮。

我的HTML代码：

                <div class="mbody">
                    <div class="form-group">
                        <select style="width: 20em;" data-bind="options: customerList, optionsText: 'Name', value: selectedCustomer">
                        </select>
                        &nbsp;<button type="button" data-bind="click: addCustomerToSelected">Add</button>
                    </div>
                </div>
                <div>
                    <table class="table">
                        <tbody data-bind="foreach: customers">
                            <tr>
                                <td>
                                    <strong data-bind="text: Name"></strong>

                                </td>
                                <td>
                                    <button type="button" data-bind="click: $parent.removeCustomerFromSelected">Remove</button>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>

我的淘汰赛代码：

 <script type="text/javascript">
   function CustViewModel(serverData) {
      var self = this;
      self.customerList = ko.observableArray();
      //display existing selected customers
      self.customers = ko.observableArray(serverData.SelectedCustomers);
      self.selectedCustomer = ko.observable();

      self.addCustomerToSelected = function () {
        self.customers.push(selectedCustomer());
        self.customerList.remove(self.selectedCustomer());
      }
      self.removeCustomerFromSelected = function (customerRow) {
        self.customers.remove(customerRow);
        self.customerList.push(customerRow);
      }
   }
</script>

如何使下拉列表订阅selectedCustomers observable数组的change事件，以便在删除项目或将其添加到selectedCustomers时，customerList会自动删除或添加其列表中的项目。

所以，如果我选择＆＃34;杰夫＆＃34;来自customerList下拉列表＆amp;单击添加，它应添加到＆amp;下面的selectedCustomers表中。然后从customerList下拉列表中删除。当我从selectedCustomers表中删除它时，它应该被添加回customerList下拉列表。

目前，我在add＆amp; amp;中有代码句柄。删除功能，但我面临的问题是最初从服务器加载时customerList的下拉列表不排除下面selectedCustomer列表中的客户。

Answer 1

一个非常好的模型是使用计算数组。假设您有一个数组customers - 您可以有两个计算项availableCustomers和selectedCustomers：

self.customers = ko.observableArray();
self.availableCustomers = ko.computed(function () {
    return self.customers().filter(function (customer) { 
        return !customer.selected()
    });
});
self.selectedCustomers = ko.computed(function () {
    return self.customers().filter(function (customer) { 
        return customer.selected()
    });
});

这里是JSFiddle Example。请注意，我做的一件事是组成一些服务器数据并将其映射到子视图模型，我添加了一个属性＆＃34;选择＆＃34;这决定了每个项目的选定状态。

这样，每个项目都有一个状态，您不必担心决定何时从哪个列表中添加或删除它，它是选择的，还是不是。

更新

要处理您获取客户列表的位置，然后单独选择客户列表，只需获取主列表，获取所选列表，并将主列表中的所有匹配客户标记为已选择。< / p>

这是一个Updated JSFiddle示例，以及相关代码：

// In your master list ajax result:
 self.customers(serverData.map(function(customer) {
    return new CustomerViewModel(customer);
 }));

// in your selected list ajax result:
  // for each selected item, mark it's corresponding ViewModel in the master list as selected
 for(var i = 0; i < selectedCustomers.length; i++) {
    // use the Id property (or some other unique key to match a selected item up to the master - you can't just compare objects
    var matchingCustomer = findById(self.customers(), selectedCustomers[i].id);
    matchingCustomer.selected(true);
 }

互斥的淘汰观察阵列

1 个答案:

更新