I would like to end up with the following HTML in the DOM using jQuery and KnockoutJs templates:

<div class="messageToAndFromOtherMember" id="13">
    <span>the message</span> 
    <span>2012-12-02 14:05:45.0</span> 
</div>

I have started writing my KO template as follows:

<div class="messageToAndFromOtherMember"  data-bind="attr:{ id: messageId}">
    <span data-bind="text: message"></span> 
    <span data-bind="text: sendDateFmted"></span> 
</div>

Upon a successful ajax request, the following js is executed:

var messageViewModel = {
         message: response.message, 
         sendDateFmted: response.sendDateFmted, 
         messageId: response.messageId
     };
ko.applyBindings(messageViewModel);

Now I am not sure how and where to actually do the binding: since my message does not exist before the ajax request is complete and I can have as several messages...

Can anyone please suggest a solution?

EDIT: I have added this to the html page:

<div data-bind="template: { name: 'message-template', data: messageViewModel }"></div>

I now get the following js error:

Uncaught Error: Unable to parse bindings. Message: ReferenceError: $messageViewModel is not defined; Bindings value: template: { name: 'message-template', data: messageViewModel }