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

Posted 2023-03-27

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

【英文标题】：Knockout.js - How to display a list of items 2 different ways using 'foreach'?

【发布时间】：2012-02-01 00:54:34

【问题描述】：

编辑

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

我正在使用 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 吗？

【参考方案1】：

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

【讨论】：

天啊——你是世上最聪明的人！！！现在一切都正常了——令人惊讶的是，一个简单的错误可以打破多少垃圾。

有时让其他人查看您的代码会有所帮助；-)