0

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

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

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

Javascript/淘汰赛绑定

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

3 回答 3

2

您可以将列表中选定的客户数据绑定到另一个数组 (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 绑定将始终是一个数组，但其中只有 1 个项目。

于 2013-02-26T18:05:45.147 回答
0

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

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());
于 2013-02-27T02:21:51.903 回答
-1

假设您要复制 self.SelectedCustomers = ko.observableArray([]);

然后使用敲除的切片功能，如下所示

self.newselectedCustomers(self.SelectedCustomers().slice(0));
于 2013-02-26T17:31:08.220 回答