使用淘汰賽將對象從一個陣列複製到另一個陣列

我正在使用Webforms頁面。在它上面，我有一個KnockoutJS ViewModel，通過調用後端C＃代碼來獲取序列化的「Customers」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>

來源

2013-02-26 PercivalMcGullicuddy

我能弄明白這一點。點擊這裏，查看我的解決方案：

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-27 02:21:51 PercivalMcGullicuddy

我不明白你爲什麼要複製的項目。 'self.SelectedComponents.push（self.componentToAdd（））'不會從'self.Components'數組中移除項目。因此，如果您沒有具體的理由說明該項目應該被複制而不被引用，那麼該代碼行是多餘的。 – nickvane 2013-02-27 12:49:41

是的，它需要複製，因爲您可以有兩個具有不同折扣和數量的項目3的實例。 – PercivalMcGullicuddy 2013-02-27 13:23:51

-1

比方說，你要複製self.SelectedCustomers = ko.observableArray（[]）;

然後使用如下

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

來源

2013-02-26 17:31:08 DevelopmentIsMyPassion

請把原因時，有人downvote答案，所以，即使我可以學習 – DevelopmentIsMyPassion 2013-02-26 19:13:51

可以從列表中所選擇的數據綁定的客戶到另一陣列（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>

在ChosenCustomers數組定義的JavaScript類：

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-26 18:05:45 nickvane

使用淘汰賽將對象從一個陣列複製到另一個陣列

回答

相關問題