Knockout.js - 如何使用'foreach'顯示項目列表2種不同的方式？

編輯Knockout.js - 如何使用'foreach'顯示項目列表2種不同的方式？

我做了一個屏幕截圖顯示更好的什麼，我試圖做的，我有問題：

enter image description here

我創建房間列表對象與淘汰賽。我使用data-bind="foreach: rooms"來顯示房間表格的代碼。房間增加了一個JQuery UI模式彈出窗口，顯示一個表格，只需要詢問房間的「名稱」。

工作正常 - 但我還需要顯示錶格下方每個房間的圖形表示 - 只需使用css類爲房間提供標準寬度，高度和顏色即可。

這裏是整個JavaScript代碼：

$(function(){ 

    function Room(data) { 
     this.name = ko.observable(data.name); 

    } 


    function RoomViewModel() { 
     var self = this; 
     self.rooms = ko.observableArray([]); 
     self.newRoomText = ko.observable(); 


     $("#hidden-button").click(function(e) {   
      e.preventDefault();   
     }) 

     self.addRoom = function() { 
      self.rooms.push(new Room({ name: this.newRoomText() })); 
      self.newRoomText("");  
      $("#modal").dialog("close");   
     } 

     self.removeRoom = function(room) { 
      self.rooms.remove(room) 
     } 

     self.RoomModal = function() { 

      $("#button-add-room").attr("disabled", "disabled"); 

      $("#input-room-name").keypress(function(e) { 
       if($(this).val() != '') { 
        $("#button-add-room").removeAttr("disabled"); 

       } else { 
        $("#button-add-room").attr("disabled", false); 
       }   
      }) 

      $("#modal").dialog({ 
       height: 400, 
       width: 400, 
       modal: true 
      }); 
     } 

    } 

    ko.applyBindings(new RoomViewModel()); 

});

當我添加保持所述表中的容器下面的容器中，該應用程序忽略某些代碼在「self.addRoom」功能。它會將房間添加到列表中，但模式窗口將不再關閉 - 使用$("#modal").dialog("close");。它也會忽略self.newRoomText("");代碼，該代碼會清除輸入值，以便爲新房間做好準備。你可以看到，如果我註釋掉id =「graphical-room-view」的div，應用程序就可以正常工作。

是否有可能在我的視圖中的兩個不同的地方使用foreach綁定相同的數組？我是否以錯誤的方式解決問題 - 我是否應該有第二個ViewModel？

來源

2012-01-02 PhillipKregg