Question

When I use the following jquery template:

<script id="cost-template" type="text/x-jquery-tmpl">
    <table class="costSection">
        <caption class="boldCaption">Costs</caption>
        <tr data-bind="css: {'alert-message block-message': quantityWarning}">
          <td class="labelHalfTd ">Total Quantity:</td>
          <td class="dataHalfTd  numericInfo" id="totalQuantity" data-bind="text: quantity"></td>
        </tr>
        <tr>
          <td class="labelHalfTd">Cost (USD):</td>
          <td class="dataHalfTd  numericInfo" id="costUsd" data-bind="text:cost.displayValue"></td>
        </tr>
    </table>    
</script>

knockout correctly evaluates the databind but we end up with the alert-message block-message class on <tbody> instead of the <tr> that has the data-bind. In other cases where the row with the data-bind is not the first row in the table, everything works fine.

Answer 1

Have you tried wrapping the trs in a tbody? I think that the browser is adding tbody and confusing the attributes with the first row.