Appending static html attribute to Knockout.js data-bind

Question

I'm binding json from a file and it works fine. the binding is being done on a html table:

<script type="text/html" id="ordertracking_template">
    <tr>  
      <td data-bind="text:ClientName"></td>
      <!-- ko foreach: SalesCohorts -->
      <td data-bind="text: TotalCohortSales">/td>
      <!-- /ko -->
      <td data-bind="text: TotalSalesInTargetPeriod"></td>
    </tr>
</script>

Now, my desire is to add a link in the same row as the TotalCohortSales. i.e.

<!-- ko foreach: SalesCohorts -->
<td data-bind="text: TotalCohortSales"><pre><a href="">Orders</a></pre>/td>
<!-- /ko -->

like shown above but thats not happening. the data is being binded but the added <pre><a href="">Orders</a></pre> elements are not rendered.

I hope the information i've provided above is enough for someone to be able to chip in with some assistance.

Jose Luis · Accepted Answer · 2017-06-17 13:28:28Z

1

When you say:

  <!-- ko foreach: SalesCohorts -->
  <td data-bind="text: TotalCohortSales">/td>
  <!-- /ko -->

you are defining the content (innerHTML) of this row (<td>). You can't add nothing else to this row.

If you want to write more data, you need to separe the <td> from its content:

  <!-- ko foreach: SalesCohorts -->
  <td>
     <span data-bind="text: TotalCohortSales"></span>
     <pre><a href="">Orders</a></pre>
  </td>
  <!-- /ko -->

Now you'll have one column per each SalesCohorts. And inside this column you'll get the TotalCohortSales and the link.

answered Jun 17, 2017 at 13:28

Jose Luis

9941 gold badge8 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

suo Over a year ago

Excellent explanation

Collectives™ on Stack Overflow

Appending static html attribute to Knockout.js data-bind

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related