Using KnockoutJs templates with jQuery
- by balteo
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 }
