index.html

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
        PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>Node Chat - Tech Demo</title>
    <script type="text/javascript" src="script/head.js"></script>
    <script type="text/javascript">
        head.js('https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js', 'script/underscore.js', 'script/backbone.js', 'script/socket.io.js', function () {
            head.js('script/model.js', 'script/views.js', function () {

                var msgs = new MessageList;
                var connection = new Connection({ socket : new io.Socket(window.location.hostname, {port: 1234}), messages :  msgs });
                var app = new AppView({
                    model : connection,
                    el : $('#chat')
                });


                msgs.add(new Message({ nick: 'bar', body : 'foo', timestamp : 'time' }));
            });
        });


    </script>
    
    <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.3.0/build/cssreset/reset-min.css">
    <style type="text/css">
        #chat {
            border:1px solid black;
            width:800px;
        }
        .messages {
            width: 100%;
            height: 200px;
            overflow-y: scroll;
        }
        .newMessage {
            width: 794px;
        }
    </style>
</head>
<body>
<div id="chat">

</div>
<script type="text/template" id="app-template">
        <ul class="messages">

        </ul>
        <input type="text" class="newMessage" />
</script>
</body>
</html>