0

Webforms ページを使用しています。その上に、バックエンドの C# コードを呼び出して、シリアル化された "Customers" の JSON リストを取得する KnockoutJS ViewModel があります。

その配列をコンボボックスにデータバインドし、ボタンがクリックされたときに選択した顧客を別の配列に追加したいと考えています。選択した顧客のリストを単純な順序なしのリストに表示したいと考えています。

「追加」ボタンをクリックしたときに、顧客を「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 に答える