敲除多個模板綁定

-3

我已經創建了兩個用於敲除模板綁定的模板設計;一個是receiverTemplate，另一個是senderTemplate，用於發送消息並嘗試通過foreach循環與ul標記進行綁定。敲除多個模板綁定

這是我在的jsfiddle代碼：http://jsfiddle.net/nwbxexeu/1/

這是給我一個錯誤：

Uncaught TypeError: undefined is not a function

請幫助我瞭解爲什麼我收到此錯誤以及如何顯示在基礎模板的條件？

例如，如果接收器是真的顯示receiverTemplate else display senderTemplate。

下面是代碼：

我的視圖模型：

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.' 
    }]) 
}

敲除模板：

一個）接收器模板

<script type="text/html" id="receiverTemplate"> 
     <li class="left clearfix"> 
      <span class="chat-img pull-left"> 
       <img src="http://placehold.it/50/55C1E7/fff&amp;text=U" alt="User Avatar" class="img-circle" /> 
      </span> 
      <div class="chat-body clearfix"> 
       <div class="header"> 
       <strong class="primary-font" data-bind="text: name"></strong> 
       <small class="pull-right text-muted"><span class="glyphicon glyphicon-time" data-bind="text: msgdate"></span></small> 
       </div> 
       <p data-bind="text: msg"></p> 
      </div> 
     </li> 
</script>

b）中發送者模板

與HTML

模板結合：

<ul class="chat" data-bind="template: { name: 'receiverTemplate', foreach: messages }" id="message-panel" style="display: none;"> 
</ul>

應用結合：

ko.applyBindings(viewModel)

來源

2014-10-20 Rohit Kesharwani

取消隱藏內容後，我沒有看到任何錯誤：http://jsfiddle.net/nwbxexeu/2/您能否添加有關如何重現問題並描述爲何隱藏內容的詳細信息？ – Tanner 2014-10-20 15:41:08

有一個原因，你得到了一個錯誤，你需要在問題中顯示代碼*。請向我們展示您的代碼堆棧溢出，可能離開小提琴鏈接作爲支持。讓我們知道您到目前爲止所研究/調試的內容。此外，它可能有助於對您的文章進行校對和/或拼寫檢查，因此很難像這樣閱讀。 – Jeroen 2014-10-20 18:40:25

我編輯了這個問題並添加了一個viewmodel和模板綁定代碼。請檢查一下。 – 2014-10-21 07:04:09

可以使用if語句做到這一點，就像這樣：

http://jsfiddle.net/nwbxexeu/3/

div> 
    <ul data-bind="foreach: messages"> 
     <!-- ko if: $data.received == true --> 
      <li class="left clearfix"> 
       <!-- Received HTML here --> 
      </li> 
     <!-- /ko --> 
     <!-- ko ifnot: $data.received == true --> 
      <li class="right clearfix"> 
       <!-- Sent HTML here --> 
      </li>  
     <!-- /ko --> 
    </ul> 
</div>

在我的小提琴我沒有使用模板綁定。我不認爲它會在小提琴中增加任何東西，因爲沒有明確的理由說明爲什麼你需要在其他地方重複使用模板。但是，您可能希望在應用中使用模板綁定，在這種情況下，您需要將其附加到li元素。

來源

2014-10-21 08:01:37 sifriday

敲除多個模板綁定

回答

相關問題