Knockout.js - 如何使用“foreach”以两种不同的方式显示项目列表？

Question

编辑

我制作了一个屏幕截图，以更好地展示我正在尝试做的事情以及我遇到的问题：

我正在使用 Knockout 创建一个 Room 对象列表。我有在添加新房间时显示房间表的代码 - 使用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(""); 代码，该代码会清除输入值以使其为新房间做好准备。

<!--******* Rooms List **********-->
        <div id="room-list-view">
            <table>
                <tbody data-bind="foreach: rooms">
                    <tr>
                        <td data-bind="text: name"></td>
                        <td><a href="#" data-bind="click: $parent.removeRoom">Delete</a></td>
                    </tr>
                </tbody>
            </table>
        </div>

        <!-- IF I COMMENT THIS PART OUT, IT WORKS JUST FINE -->
         <div id="graphical-room-view">
            <ul data-bind="foreach: rooms">
                <li class="graphical-room" data-bind="text: room"></li>
            </ul>

        </div> 

如您所见，如果我用 id="graphical-room-view" 注释掉 div，应用程序就可以正常工作。

是否可以在我的视图中的两个不同位置对同一个数组使用 foreach 绑定？我是不是走错路了——我应该有第二个 ViewModel 吗？

Answer 1

在您的第二个foreach 中，您使用的不是text: name，而是text: room。可能是问题;-)