Question

我为挖空模板绑定创建了两个模板设计;一个是receiverTemplate，另一个是senderTemplate，用于发送消息，并尝试通过ul循环与foreach代码绑定。

这是我在jsfiddle中的代码：http://jsfiddle.net/nwbxexeu/1/

它给了我一个错误：

未捕获的TypeError：undefined不是函数

请帮助我理解为什么我会收到此错误以及如何根据条件显示模板？

例如如果接收方为真，则显示 receiverTemplate ，否则显示 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.'
    }])
}

淘汰赛模板：

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）发件人模板

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

使用HTML进行模板绑定：

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

应用绑定：

ko.applyBindings(viewModel)

Answer 1

您可以使用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元素。

淘汰多个模板绑定

1 个答案: