Question

EDIT

I made a screen shot to show better what I’m attempting to do, and the problems I’m having:

I’m creating a list of Room objects with Knockout. I have code that displays a table of rooms as new rooms are added – using data-bind="foreach: rooms". The rooms are added with a JQuery UI modal popup that displays a form simply asking for the ‘name’ of the room.

This works fine – but I also need to display a graphical representation of each room underneath the table list – simply using css class to give a standard width, height, and color to the rooms.

Here is the entire javascript code:

$(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());

});

When I add the container below the container that holds the table, the app ignores some of the code in the ‘self.addRoom’ function. It will add the room to the list, but the modal window will no longer close – using $("#modal").dialog("close");. It also ignores the self.newRoomText(""); code that clears out the input value to get it ready for a new room.

<!--******* 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> 

As you can see, if I comment out the div with id=”graphical-room-view”, the app works just fine.

Is it possible to use a foreach binding for the same array in two different places within my view? Am I going about this the wrong way – should I have a 2nd ViewModel?

Answer 1

In your second foreach you’re not using text: name but text: room. May be the issue 😉