녹아웃 다중 템플릿 바인딩

Question

녹아웃 템플릿 바인딩을위한 두 가지 템플릿 디자인을 만들었습니다. 하나는 receiverTemplate이고 다른 하나는 메시징을 위해 senderTemplate이고 foreach 루프를 통해 ul 태그로 바인딩하려고합니다. 그것은 나에게 오류주고있다 http://jsfiddle.net/nwbxexeu/1/

:

Uncaught TypeError: undefined is not a function

도와주세요 제가이 오류를 받고 있어요 방법과 기준으로 템플릿을 표시하는 이유를 이해 여기

는 jsfiddle 내 코드입니다 조건의?

예 : 수신기가 true 인 경우 수신기 템플릿 else 표시 보낸 사람 템플릿.

내 뷰 모델 :

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

녹아웃 틀 :

a) 수신기 템플릿

<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) 발신자 템플릿

,373 여기

는 코드

템플릿 HTML 바인딩 :

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

바인딩 적용 :

이

ko.applyBindings(viewModel) 

Answer 1

당신이 경우 문을 사용하여 작업을 수행 할 수 있습니다, 다음과 같이 :

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 요소에 연결해야합니다.