CODEWITHSUNDEEP
knockout.js
John Livermore
John Livermore

Reputation: 31313

Use knockout foreach to generate elements, but keep static elements

I want to use Knockout to generate the following HTML

<tr>
    <th>Substatus</th>
    <th>Header 1</th>
    <th>Header 2</th>
    <th>Total</th>
</tr>

If the data model looks like this...

function Model() {
    var self = this;
    self.headers = ko.observableArray([{ Description: 'Header 1' }, { Description: 'Header 2' }]);
}

Notice the first and last column header are not specified by the data model, but, rather, are statically defined. How would I change the following template to output the header like I need it?

<script type="text/html" id="vendorReportTemplate">
    <tr>
        <th>Substatus</th>

        <!--somehow i need knockout to generate the dynamic headers here-->

        <th>Total</th>
    </tr>
</script>

Upvotes: 0

Views: 285

Answers (1)

Joe
Joe

Reputation: 82554

Virtual Elements

<tr>
    <th>Substatus</th>

    <!-- ko foreach: headers -->
    <th data-bind="text: Description"></th>
    <!-- /ko -->
    <th>Total</th>
</tr>

Example

Upvotes: 2

Related Questions