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