將項目從一個可觀察陣列添加到另一個項目會導致回發時不可移動的項目

我有一個jsfiddle來大致說明我在應用程序代碼中遇到的情況。（我會發佈下面的實際小提琴代碼，爲後人。）將項目從一個可觀察陣列添加到另一個項目會導致回發時不可移動的項目

本質上，我有一個可觀察的數組，用於填充複選框選項列表。選擇其中一個選項可將該項目添加到僅由選定項目組成的另一個可觀察陣列。

如果表單中存在某種錯誤（或者我想如果您正在編輯現有數據），則選定的可觀察陣列將從先前選擇的項目開始填充。但是，現在，原始項目與所選項目之間沒有任何關聯，因此，選中或取消選中其中一個複選框會添加一個副本並僅刪除該副本。

我的問題是1）我是否完全錯誤（即是否有更好的方法來做到這一點，不會導致此問題），以及2）如果沒有，最好的方法是恢復項目，以便複選框將指示項目在那裏，取消選中它們將刪除項目？

HTML

<ul data-bind="foreach: Fruit"> 
    <li> 
     <label> 
      <input type="checkbox" class="cbFruit" data-bind="checked: Selected, attr: { value: Name }" /> 
      <span data-bind="text: Name"></span> 
     </label> 
    </li> 
</ul> 

<ul data-bind="foreach: SelectedFruit"> 
    <li data-bind="text: Name"></li> 
</ul>

var FruitViewModel = function (name) { 
    var self = this; 

    self.Name = ko.observable(name); 
    self.Selected = ko.observable(false); 

    return self; 
}; 

var GroceryStoreViewModel = function() { 
    var self = this; 

    self.Fruit = ko.observableArray([ 
     new FruitViewModel('Apples'), 
     new FruitViewModel('Oranges'), 
     new FruitViewModel('Bananas'), 
     new FruitViewModel('Pineapples') 
    ]); 

    self.SelectedFruit = ko.observableArray([ 
     new FruitViewModel('Oranges'), 
     new FruitViewModel('Bananas') 
    ]); 

    return self; 
}; 

$(document).ready(function() { 
    var viewModel = GroceryStoreViewModel(); 
    ko.applyBindings(viewModel); 

    $('.cbFruit').on('click', function() { 
     var fruit = ko.dataFor(this); 
     if (fruit.Selected()) { 
      viewModel.SelectedFruit.push(fruit); 
     } else { 
      viewModel.SelectedFruit.remove(fruit); 
     } 
    }); 
});

來源

2013-05-02 Chris Pratt

您是否看過[selectedOptions binding]（http://knockoutjs.com/documentation/selectedOptions-binding.html）和多選列表？（不完全是你的問題的答案，在某種程度上仍然相關）。 – Jeroen 2013-05-02 19:07:31

我將使用'Selected'屬性來跟蹤初始選擇並將'SelectedFruit'更改爲計算... http：// jsfiddle。淨/ QLdzG/1 / – nemesv 2013-05-02 19:10:07

我通過簡單地扔掉單獨觀察到的陣列（和單獨公佈名單）解決了這個問題。取而代之的是，我使用的是相同的完整列表都foreach用途，並在第二個，用淘汰賽虛擬if元素，有它只顯示選定的：

HTML

<ul data-bind="foreach: Fruit"> 
    <li> 
     <label> 
      <input type="checkbox" class="cbFruit" data-bind="checked: Selected, attr: { value: Name }" /> 
      <span data-bind="text: Name"></span> 
     </label> 
    </li> 
</ul> 

<ul data-bind="foreach: Fruit"> 
    <!-- ko if: Selected --> 
    <li data-bind="text: Name"></li> 
    <!-- /ko --> 
</ul>

第二個列表中的數據與第一個列表相同，所以我必須在服務器端進行一些清理，以確保只有內容值（水果名稱等）纔會再次顯示。

來源

2013-05-03 14:31:22

將項目從一個可觀察陣列添加到另一個項目會導致回發時不可移動的項目

回答

相關問題