Chat room listing for PubNub Messenger application.

index.html

<!-- Chat List Page -->
<div data-role="page" id="chatListPage" data-theme="c" class="type-chat-list">
  <div data-role="header">
    <h1>Current Chats</h1>
  </div>

  <div data-role="content">
    <input type="text" name="name" id="chatRoomName" placeholder="Chat Room Name" />
    <a href="#" id="newChatButton" data-role="button">Join New Chat</a>

    <br />

    <ul data-role="listview" data-split-icon="delete" data-split-theme="c" id="chatList">
      <!-- <li><span class="username">User123:</span>This is my message.</li> -->
    </ul>
  </div>
</div>

messenger.js

var chatChannel = '',
    chatRoomName = $('#chatRoomName'),
    charListEl = $('#chatList'),
    subscriptions = [],
    pages = {
      chatList: $("#chatListPage"),
      chat: $("#chatPage")
    };

function onChatListOpen () {
  chatListEl.empty();
  for(var i = 0; i < subscriptions.length; i++) {
    var chatName = subscriptions[i],
        chatEl = $("<li><a href='#chatPage' data-channel-name='" + chatName + "'>" 
          + chatName 
          + "</a><a href='#delete' data-rel='dialog' data-channel-name='" + chatName + "'></a></li>");
    chatListEl.append(chatEl);
    chatListEl.listview('refresh');
  }
  
  newChatButton.off('click');
  newChatButton.click(function (event) {
    if(chatRoomName.val() !== '') {
      chatChannel = chatRoomName.val();
  
      $.mobile.changePage(pages.chat);
    }
  });
};