Knockout.js动态选择模板错误：“无法找到具有ID的模板”

Question

我的目标是显示“noSets”模板，如果observableArray长度小于0并且呈现模板带有项目详细信息 - “showSets”，如果observableArray长度大于0 。我想为此使用模板，但FireBug显示错误：无法找到ID为“templatename”的模板。 这里是视图模型：

function SetsViewModel() { 
      var self = this; 
      self.usersets = ko.observableArray(); 
      self.getTemplate = function() { 
       return self.usersets().length > 0 ? "showSets" : "noSets"; 
      } 
    } 
$(document).ready(function() { 
      ko.applyBindings(new SetsViewModel(), document.getElementById('user_sets')); 
}); 

这里是HTML标记：

<div data-bind="template: { name: $root.getTemplate, foreach: usersets }" id="user_sets"> 
      <script type="text/html" id="noSets"> 
       <p>You do not have items yet.</p> 
      </script> 
      <script type="text/html" id="showSets"> 
       <div class="block"> 
        <input type="hidden" data-bind="value: $data.SetId" /> 
        <div class="fav" data-bind="css: { fullop: $data.IsFavorite == true }"> 
         <img alt="" src="img/fav.png" data-bind="click: $root.setFavorite"> 
        </div> 
        <div> 
         <img alt="" data-bind="attr: { src: $data.SetImg }"> 
        </div> 
        <div class="txt"> 
         <h3 data-bind="text: $data.SetName, click: $root.go"></h3> 
         <p><span data-bind="text: $data.ItemsNumber + ' вещей,'"></span><span data-bind=" text: ' общая цена ' + $data.SetPrice + ' руб'"></span></p> 
        </div> 
       </div> 
      </script> 
     </div> 

我怎样才能解决呢？

Answer 1

您可以将div之外的模板声明为您要绑定的模板。作为@JeffMercado指出：

The actual problem was that since the user_sets uses a template binding, the body is discarded (and the templates along with it)

function SetsViewModel() { 
 
      var self = this; 
 
      self.usersets = ko.observableArray([{SetId: 1, SetName: 'Name 1'}]); 
 
      self.getTemplate = function() { 
 
       return self.usersets().length > 0 ? "showSets" : "noSets"; 
 
      } 
 
    } 
 
$(document).ready(function() { 
 
      ko.applyBindings(new SetsViewModel(), document.getElementById('user_sets')); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> 
 
<script type="text/html" id="noSets"> 
 
    <p>You do not have items yet.</p> 
 
</script> 
 
<script type="text/html" id="showSets"> 
 
    <div class="block"> 
 
     <input data-bind="value: $data.SetId" /> 
 
     <div class="txt"> 
 
      <h3 data-bind="text: 'Set name:' + $data.SetName"></h3>       
 
     </div> 
 
    </div> 
 
</script> 
 

 
<div data-bind="template: { name: getTemplate, foreach: usersets }" id="user_sets"> 
 
</div>

Answer 2

我想命名模板可能是错误的做法，以这个具体问题 - 他们更设计为当你想为每个项目不同的模板，这里不是这种情况。

<div data-bind="visible: usersets().length == 0"> 
    You have no sets 
</div> 

<div data-bind="visible: usersets().length > 0, foreach: usersets" id="user_sets"> 
    <div class="block"> 
     <input type="hidden" data-bind="value: $data.SetId" /> 
     <div class="fav" data-bind="css: { fullop: $data.IsFavorite == true }"> 
      <img alt="" src="img/fav.png" data-bind="click: $root.setFavorite"> 
     </div> 
     <div> 
      <img alt="" data-bind="attr: { src: $data.SetImg }"> 
     </div> 
     <div class="txt"> 
      <h3 data-bind="text: $data.SetName, click: $root.go"></h3> 
      <p><span data-bind="text: $data.ItemsNumber + ' вещей,'"></span><span data-bind=" text: ' общая цена ' + $data.SetPrice + ' руб'"></span></p> 
     </div> 
    </div> 
</div>