CODEWITHSUNDEEP
knockout.js
user2641043
user2641043

Reputation: 405

Template that spans multiple rows

Can I create a template which includes multiple rows does not need to be wrapped by a tbody element? I can't use a tbody as it resets any rowspan elements that I have.

Here's what I have so far:

ko.applyBindings();
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>

<script type="text/html" id="template1">
  <tr>
    <td>Hello</td>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
  </tr>
  <tr>
    <td>World</td>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
  </tr>
</script>

<table>
  <tr>
    <td rowspan='3'>Menu</td>
    <th>Header</th>
    <td>one</td>
    <td>two</td>
    <td>three</td>
    <td>four</td>
  </tr>
 <tr data-bind="template: { name: 'template1'}"></tr>
</table>

Upvotes: 1

Views: 272

Answers (2)

user2641043
user2641043

Reputation: 405

containerless bindings is the answer.

instead of:

<tr data-bind="template: { name: 'template1'}"></tr>

I needed:

<!-- ko template: { name: 'template1'}--><!-- /ko -->

Upvotes: 2

Jorgelig
Jorgelig

Reputation: 294

If only what you will use in one place in the DOM, do not need a template; you can do it directly where you'll iterate the rows:

var ViewModel = function() {
  var self = this;
  self.entries = [{
    name: "one",
    type: 'file'
  }, {
    name: "two",
    type: 'folder'
  }, {
    name: "three",
    type: 'file'
  }];

};

ko.applyBindings(new ViewModel());
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<table>
  <tbody data-bind="foreach: entries">
    <tr>
      <td> <span data-bind="text: name"></span>

      </td>
    </tr>
  </tbody>
</table>

Upvotes: 0

Related Questions