在 knockout.js 中替换正常 div 的模板元素

Question

我试图在不使用 template 标记的情况下使用模板，因为任何版本的 IE 都不支持该标记。

而不是这个：

<template id="component-input-slider">
    <span data-bind="text: display"></span>
</template>

我正在尝试使用：

<div class="hidden" id="component-input-slider">
    <span data-bind="text: display"></span>
</div>

在第二种情况下，我得到了错误：display is not defined。

最好的解决方案是什么？

我尝试在模板包装器和 it seems to work on the reproduction 中添加 data-bind: if: $data，但在我的真实应用中没有。

Answer 1

像上面的评论一样，您可以使用脚本标签创建这样的模板：

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div>
  <table>
    <tbody data-bind="template: { name: 'table-template'}"></tbody>
  </table>
</div>

<script id="table-template" type="text/html">
    <!--ko foreach: data-->
        <tr data-bind="data: $data">
            <td data-bind="text: category"></td>
            <td data-bind="text: description"></td>
        </tr>
  <!--/ko-->
</script>

这是一个有效的 JSfiddle https://jsfiddle.net/gmbrx2vd/4/

在 knockout.js 中替换正常 div 的模板元素

Replace template element for normal div in knockout.js

knockout.js

knockout-3.2