Javascript Knockout.js动态选择模板错误："；找不到ID为''&引用；

我的目标是，如果ObservaterRay长度小于0，则显示“鼻子”模板，如果ObservaterRay长度大于0，则使用项目详细信息呈现模板-“显示集”。我想为此使用模板，但FireBug显示错误：找不到ID为“templatename”的模板。 以下是ViewModel：

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>

您还没有物品

---

如何修复它？

您可以在绑定到的

div

之外声明模板作为解决方法。正如@JeffMercado所说：

实际的问题是，由于用户_set使用模板绑定，所以主体被丢弃（以及模板）

函数SetsViewModel（）{
var self=这个；
self.usersets=ko.observatarray（[{SetId:1，SetName:'Name 1'}]）；
self.getTemplate=函数（）{
返回self.usersets（）.length>0？“showSets”：“noSets”；
}
}
$（文档）.ready（函数（）{
应用绑定（新的SetsViewModel（），document.getElementById（'user_set'）；
});

您还没有物品

我认为命名模板可能是解决此特定问题的错误方法-它们更适合于为每个项目设计不同模板的情况，但这里的情况并非如此。相反，如果有0个项目，则更适合显示完全不同的
div
：

<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>


你没有套路

您是否尝试过将模板放在
div
标记之外？谢谢@Tanner，我不知道。模板不一定要出现在使用它们的绑定之前，在文档准备好之前绑定是不会应用的，这样它们就可以存在了。实际的问题是，由于
user\u set
使用了模板绑定，主体被丢弃（以及模板）。我也尝试过这种方法，但没有成功，可能是我以前做错了什么。