敲除多个模板绑定

问题描述：

我已经创建了两个用于敲除模板绑定的模板设计;一个是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)

取消隐藏内容后，我没有看到任何错误：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元素。

敲除多个模板绑定

相关推荐