Knockout.js 动态选择模板错误：“找不到带有 ID 的模板”

Question

如果 observableArray 长度小于 0，我的目标是显示“noSets”模板，并使用项目详细信息呈现模板 - “showSets”，如果 observableArray 长度大于 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>

我该如何解决？

Answer 1

您可以在要绑定的div 之外声明模板作为解决方法。正如@JeffMercado 所说：

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

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

我认为命名模板可能是解决此特定问题的错误方法 - 它们更适合当您想要为每个项目使用不同的模板时，这里不是这种情况。相反，当有 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>