Question

我正在使用Webforms页面。在它上面我有一个KnockoutJS ViewModel，通过调用后端C＃代码获取序列化的“Customers”列表。

我将该数组绑定到组合框，并且我想在单击按钮时将选定的Customer添加到另一个数组。我希望所选客户列表显示在一个简单的无序列表中。

我不太确定在单击“添加”按钮时如何将Customers添加到“SelectedCustomers”属性中。注意：我不想移动它们，只需要复制。

Javascript / Knockout Bindings

<script type="text/javascript">
    $(document).ready(function() {

        function CustomerViewModel() {
            var self = this;

            self.Customers= <%= getJson() %>;
            self.SelectedCustomers = ko.observableArray([]);

            //operations
            self.addCustomerToList = function() {
                //Add selected customer to self.SelectedCustomers 
            }

        }

        ko.applyBindings(new CustomerViewModel());
    });
    </script>

HTML元素

<select data-bind="options: Customers, optionsText: 'CustomerName', value: CustomerID, optionsCaption: 'Select a Customer to Add'"></select>

<button type="submit">Add Customer</button>

Selected Customers:

<ul data-bind="foreach: SelectedCustomers">
 <li><span data-bind="text: CustomerName"></span></li>
</ul>

Answer 1

您可以将所选客户从列表中数据绑定到另一个数组（ChosenCustomers）。见http://knockoutjs.com/documentation/selectedOptions-binding.html

<select data-bind="selectedOptions: ChosenCustomers, options: Customers, optionsText: 'CustomerName', value: CustomerID, optionsCaption: 'Select a Customer to Add'"></select>

在javascript类中定义了ChosenCustomers数组：

self.Customers= <%= getJson() %>;
self.SelectedCustomers = ko.observableArray([]);
self.ChosenCustomers = ko.observableArray([]);

在方法中，我们检查它是否已经存在，如果没有将它添加到SelectedCustomers数组中。

self.addCustomerToList = function() {
    self.ChosenCustomers.each(function(index, item){
        if(self.SelectedCustomers.indexOf(item) < 0){
            self.SelectedCustomers.push(item);
        }
    });
};

注意：虽然您的组合框一次只允许选择1个客户，但selectedOptions绑定将始终是一个数组，但其中只有一个项目。

Answer 2

我能够弄清楚这一点。在这里查看我的解决方案：

http://jsfiddle.net/6vBsm/1/

function ViewModel() {
    var self = this;

    self.Components = ko.observableArray([{
        "ID": "1",
            "Name": "Tennis Ball",
            "Description": "Basic Yellow Tennis Ball 9",
            "Quantity": 0,
            "Price": 1.99,
            "Discount": 0.0,
            "FreePeriods": 0
    }, {
        "ID": "2",
            "Name": "Hockey Stick",
            "Description": " Premium Carbon Fiber Construction",
            "Quantity": 0,
            "Price": 67.99,
            "Discount": 0.0,
            "FreePeriods": 0
    }, {
        "ID": "3",
            "Name": "Cycling Helmet",
            "Description": " For going fast.",
            "Quantity": 0,
            "Price": 226.99,
            "Discount": 0.0,
            "FreePeriods": 0
    }]);

    self.componentToAdd = ko.observable();
    self.SelectedComponents = ko.observableArray([]);


    // Computed data
    self.totalSurcharge = ko.computed(function () {
        var total = 0;
        for (var i = 0; i < self.SelectedComponents().length; i++)
        total += self.SelectedComponents()[i].Price;
        return total;
    });


    //Operations
    self.addComponent = function () {
        var mycopy = JSON.parse(ko.toJSON(self.componentToAdd()));
        self.SelectedComponents.push(mycopy);
    };

}

ko.applyBindings(new ViewModel());

Answer 3

假设您要复制self.SelectedCustomers = ko.observableArray（[]）;

然后使用如下所示的淘汰切片功能

self.newselectedCustomers(self.SelectedCustomers().slice(0));

使用knockout将对象从一个数组复制到另一个数组

3 个答案: