title: Using KnockoutJs templates with jQuery
body: <p>I would like to end up with the following HTML in the DOM using jQuery and KnockoutJs templates:</p>
  
  <pre><code>&lt;div class="messageToAndFromOtherMember" id="13"&gt;
      &lt;span&gt;the message&lt;/span&gt; 
      &lt;span&gt;2012-12-02 14:05:45.0&lt;/span&gt; 
  &lt;/div&gt;
  </code></pre>
  
  <p>I have started writing my KO template as follows:</p>
  
  <pre><code>&lt;div class="messageToAndFromOtherMember"  data-bind="attr:{ id: messageId}"&gt;
      &lt;span data-bind="text: message"&gt;&lt;/span&gt; 
      &lt;span data-bind="text: sendDateFmted"&gt;&lt;/span&gt; 
  &lt;/div&gt;
  </code></pre>
  
  <p>Upon a successful ajax request, the following js is executed:</p>
  
  <pre><code>var messageViewModel = {
           message: response.message, 
           sendDateFmted: response.sendDateFmted, 
           messageId: response.messageId
       };
  ko.applyBindings(messageViewModel);
  </code></pre>
  
  <p>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...</p>
  
  <p>Can anyone please suggest a solution?</p>
  
  <p><strong>EDIT 1</strong>: I have added this to the html page:</p>
  
  <pre><code>&lt;div data-bind="template: { name: 'message-template', data: messageViewModel }"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>I now get the following js error:</p>
  
  <blockquote>
    <p>Uncaught Error: Unable to parse bindings. Message: ReferenceError:
    $messageViewModel is not defined; Bindings value: template: { name:
    'message-template', data: messageViewModel }</p>
  </blockquote>
  
  <p><strong>EDIT 2</strong>: I have altered my code as follows:</p>
  
  <pre><code>var messageViewModel = {
      data: ko.observable({   
          message: response.message, 
          sendDateFmted: response.sendDateFmted, 
          messageId: response.messageId
      })
       };
  
  $("&lt;div&gt;",{
      class:"messageToAndFromOtherMember"
  }).data("bind", "template: { name: 'message-template', data: data }").appendTo("#messagesToAndFromOtherMember");
  
  ko.applyBindings(messageViewModel);
  </code></pre>
  
  <p>Please note that I am need to be able to add the element <strong>from jQuery</strong> in order to be able to add one message then another and so on. However, the above jQuery code does not work and I don't see any such thing as <strong>data-bind</strong> in the DOM...</p>