Question

修改

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

enter image description here

我正在使用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。可能是问题; - ）

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

1 个答案: