Replace template element for normal div in knockout.js

Question

I'm trying to use templates without using the template tag as this one is not supported in any version of IE.

Instead of this:

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

I'm trying to use:

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

And in the 2nd case I'm getting the error: display is not defined.

• Working with templates
• Error without templates

What's the best solution for this?

I tried adding data-bind: if: $data in the template wrapper and it seems to work on the reproduction, but not in my real app.

Answer 1

Like the comment above you can use a script tag to create templates like this:

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

Here is a working JSfiddle https://jsfiddle.net/gmbrx2vd/4/