knockout.js - 使用knockout foreach生成元素，但保留静态元素

Question

我想使用 Knockout 生成以下 HTML

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

如果数据模型看起来像这样......

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

请注意，第一个和最后一个列标题不是由数据模型指定的，而是静态定义的。我将如何更改以下模板以输出我需要的标题？

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

Answer 1

虚拟元素

<tr>
    <th>Substatus</th>

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

例子