可觀察到的數組更改后，敲除應用綁定

Question

我有一個表，其中包含從可剔除的可觀察數組中獲得的項目，用戶輸入搜索文本，並且巧合地填充了observableArray，該表以模式顯示。 每個項目都有一個按鈕來打開具有某些功能的另一個模式（由於不相關而被省略）。 如果observableArray的長度大於0，則該表必須顯示項目，否則，必須顯示一行以指示沒有要顯示的結果。

<tr style="display: none" data-bind="visible: items().length == 0">
    <td class="text-center alert alert-warning" colspan="4"><b>There's no coincidences</b></td>
</tr>

我的視圖模型：

var viewModel = function () {
    self.items= ko.observableArray([]);

    //Modal is already on html, but not visible, to show it I use this
    $('#searchProduct').modal('show');

    //When modal is closed, the table is cleaned, so the items in observableArray are removed
    $('#searchProduct').on('hidden.bs.modal', function () {
        self.items.removeAll();
    });
}

問題是，可見綁定第一次工作正常，但是當observableArray長度更改時（在隱藏時調用removeAll），綁定將不再應用。 我知道是因為綁定已經適用，所以當observableArray更改時，長度會更新，但條件無法再次呈現html。

如何用淘汰賽解決呢？

（我試圖做到非常具體，但是如果需要更多信息，我可以更新該信息以使其更加清晰）

Answer 1

您發布的代碼應該可以正常工作。 這是一個例子：

 function Item() { self.txt = ko.observable("Test observable"); } function RootViewModel() { var self = this; self.items = ko.observableArray([new Item(), new Item()]); $('#searchProduct').modal('show'); $('#searchProduct').on('hidden.bs.modal', function () { self.items.removeAll(); }); } ko.applyBindings(new RootViewModel()); 

 pre { background: white; padding: 10px; color: #333; font: 11px consolas; border: 1px solid #ddd; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min.js"></script> <div id="searchProduct" class="modal fade"> <div class="modal-dialog"> <div class="modal-content">Fake Modal</div> </div> </div> <table> <tbody> <tr style="display: none" data-bind="visible: items().length == 0"> <td class="text-center alert alert-warning" colspan="4"><b>There's no coincidences</b> </td> </tr> <!-- ko foreach: items --> <tr> <td data-bind="text: txt"></td> </tr> <!-- /ko --> </tbody> </table> <hr>Debug info: <pre data-bind="text: ko.toJSON($root, null, 2)"></pre> 

但是請注意，我建議對bs模態的顯示/隱藏使用自定義綁定處理程序，而不應該在視圖模型內部處理DOM交互（例如on處理程序上）。

Answer 2

調用removeAll會清空基礎數組，並且您的兩個可觀察對象似乎都引用了同一數組。而不是調用removeAll，請像self.items([]);

我創建了一個小提琴示例，將其添加到數組並從數組中刪除所有內容。

http://jsfiddle.net/d7mpc6wa/4/

我看不到完整的HTML代碼，因此在這里創建了一個類似的示例。

的HTML

<table>
    <tbody data-bind="foreach: items">
        <tr><td data-bind="text:$data.name"></td></tr>
    </tbody>
    <tbody>
        <tr data-bind="visible: items().length == 0">
            <td class="text-center alert alert-warning" colspan="4"><b>There's no coincidences</b></td>
        </tr>
    </tbody>
</table>

<button data-bind="click:cleanArray">Clean Array</button>
<button data-bind="click:addArray">Add Array</button>

視圖模型

   function VM() {
     var self = this;
     var arr = [{name:'name 1'},{name:'name 2'},{name:'name 3'}];     
     self.items = ko.observableArray(arr);
     self.cleanArray = function(){
       self.items([]);
     }

     self.addArray = function(){
       self.items([]);
       self.items(arr);
       console.log(self.items());
     };
   }
  ko.applyBindings(new VM());  

請讓我知道是否有幫助

更新

因此，您可以在此處將數組中的項目作為self.items([]);刪除self.items([]); 或self.items.removeAll(); 所以有一點區別。

self.items([]); 將用新的空數組替換當前數組。 但self.items.removeAll()將從刪除所有項目self.items +能將清除陣列實例。

self.array = ['1', '2', '3'];
self.myArray1 = ko.observableArray(self.array);
self.myArray1.removeAll(); 

將清空self.myArray1 +將清空self.array

下面的例子清楚地說明了區別，請看看。

http://jsfiddle.net/LCQQH/

謝謝

Answer 3

我很as愧，我發布的這段代碼的所有內容都很好，錯誤是當我關閉模式時，我正在刪除html中的所有alert類，這顯然是在td元素中刪除了alert-warning，所以還是刪除所有警報，不是目的，我要從模式中刪除警報危險。 我真的很抱歉在SO上發布了這個愚蠢的問題，@ Jeroen，我知道將jQuery與剔除混合以隱藏模式是有問題的，只是我不知道如何正確地做。 非常感謝您的回答。