title: Knockout Multiple Template Binding
body: <p>I have created a two template design for knockout template binding; one is <code>receiverTemplate</code> and  the other is <code>senderTemplate</code> for messaging and trying to bind with a <code>ul</code> tag via a <code>foreach</code> loop.</p>
  
  <p>Here is my code in a jsfiddle: <a href="http://jsfiddle.net/nwbxexeu/1/" rel="nofollow">http://jsfiddle.net/nwbxexeu/1/</a></p>
  
  <p>It is giving me an error:</p>
  
  <blockquote>
    <p>Uncaught TypeError: undefined is not a function</p>
  </blockquote>
  
  <p>Please help me understand why I'm getting this error and how to display a template on basis of a condition?</p>
  
  <p>For e.g. if receiver is true display <strong>receiverTemplate</strong> else display <strong>senderTemplate</strong>.</p>
  
  <p>Here is the code:</p>
  
  <p>My viewmodel:</p>
  
  <pre><code>var viewModel = {
      messages: ko.observableArray([{
          received: true,
          name: 'Rohit Kesharwani',
          msgdate: '12 mins ago',
          msg: 'Hello User! How can I assist you?'
      },
      {
          received: false,
          name: 'Rahul Singh',
          msgdate: '11 mins ago',
          msg: 'I want to create a website using asp.net. Please assist me.'
      }])
  }
  </code></pre>
  
  <p>Knockout Template:</p>
  
  <p>a) Receiver Template</p>
  
  <pre><code>&lt;script type="text/html" id="receiverTemplate"&gt;
         &lt;li class="left clearfix"&gt;
            &lt;span class="chat-img pull-left"&gt;
                &lt;img src="http://placehold.it/50/55C1E7/fff&amp;amp;text=U" alt="User Avatar" class="img-circle" /&gt;
             &lt;/span&gt;
             &lt;div class="chat-body clearfix"&gt;
                 &lt;div class="header"&gt;
                   &lt;strong class="primary-font" data-bind="text: name"&gt;&lt;/strong&gt;
                   &lt;small class="pull-right text-muted"&gt;&lt;span class="glyphicon glyphicon-time" data-bind="text: msgdate"&gt;&lt;/span&gt;&lt;/small&gt;
                 &lt;/div&gt;
                 &lt;p data-bind="text: msg"&gt;&lt;/p&gt;
              &lt;/div&gt;
         &lt;/li&gt;
   &lt;/script&gt;
  </code></pre>
  
  <p>b) Sender Template</p>
  
  <pre><code>&lt;script type="text/html" id="senderTemplate"&gt;
         &lt;li class="right clearfix"&gt;
               &lt;span class="chat-img pull-right"&gt;
                  &lt;img src="http://placehold.it/50/FA6F57/fff&amp;amp;text=ME" alt="User Avatar" class="img-circle" /&gt;
                &lt;/span&gt;
                &lt;div class="chat-body clearfix"&gt;
                    &lt;div class="header"&gt;
                       &lt;small class=" text-muted"&gt;&lt;span class="glyphicon glyphicon-time" data-bind="text: msgdate"&gt;&lt;/span&gt;&lt;/small&gt;
                       &lt;strong class="pull-right primary-font" data-bind="text: name"&gt;&lt;/strong&gt;
                    &lt;/div&gt;
                    &lt;p data-bind="text: msg"&gt;&lt;/p&gt;
                &lt;/div&gt;
          &lt;/li&gt;
  &lt;/script&gt;
  </code></pre>
  
  <p>Template binding with HTML:</p>
  
  <pre><code>&lt;ul class="chat" data-bind="template: { name: 'receiverTemplate', foreach: messages }" id="message-panel" style="display: none;"&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>Applying binding:</p>
  
  <pre><code>ko.applyBindings(viewModel)
  </code></pre>