如何从视图模型创建 Html 表

Question

我正在创建一个数据表，其中 html 表中的每个单元格都可以是一个输入控件，也可以是另一个 html 控件，如 select（现在我需要为输入控件工作）。像这样的：

<Table>
      <thead>
        <tr>
            <th>Column1</th>
            <th>Column2</th>
         </tr>
    </thead>
    <tbody>
         <tr>                
             <td><input type="text" value=80 /></td>
             <td><input type="text" value=100 /></td>
         </tr>         
        <tr>                
             <td><input type="text" value=120 /></td>
             <td><input type="text" value=140 /></td>
         </tr>  
        <tr>                
             <td><input type="text" value=160 /></td>
             <td><input type="text" value=180 /></td>
         </tr>
    </tbody>
</Table>    

我目前发现的只是使用简单的数据绑定创建数据表，因此每个单元格都是只读单元格。

在this jsfiddle 中，您可以看到我期望以某种方式得到的结果。

更新：我需要的是创建一个表，其中列数和行数将取决于数据源（在本例中为视图模型的属性）。

Answer 1

您引用的小提琴的问题是列表中项目的属性不可观察。我使用淘汰赛映射插件为我做这件事。

Here is an updated fiddle 演示了当您编辑上表中的值时，下表中的值会发生变化。

这里是代码，但记得参考敲除映射插件。

*更新的答案....查看评论和UPDATED JSFIDDLE*

HTML

Generated table using ko    
<table border="1">
    <thead>
        <tr data-bind='foreach: datacolumns'>
            <th>
                <span data-bind="text: ColumnName"></span>
            </th>      
        </tr>
    </thead>
    <tbody data-bind="foreach: dataModel">
        <tr  data-bind='foreach: $root.datacolumns'>
            <td>
                <input type="text" data-bind="value:$parent['Value' + ColumnName]"/>
            </td>
        </tr>
    </tbody>
</table>
<br/>
And this table updates when you tab out of the textboxes
<table border="1">
    <thead>
        <tr data-bind='foreach: datacolumns'>
            <th>
                <span data-bind="text: ColumnName"></span>
            </th>      
        </tr>
    </thead>
    <tbody data-bind="foreach: dataModel">
        <tr  data-bind='foreach: $root.datacolumns'>
            <td data-bind="text:$parent['Value' + ColumnName]"></td>
        </tr>
    </tbody>
</table>

Javascript

function ViewModel(model,columns) {
    var self = this;          

    self.dataModel = ko.mapping.fromJS(model);  
    self.datacolumns = columns;    
}    
var columns =  [{ColumnName:'Column1'},{ColumnName:'Column2'}];

var model =  [
    { ValueColumn1: '80', ValueColumn2: '100' },
    { ValueColumn1: '120', ValueColumn2: '140' },
    { ValueColumn1: '160', ValueColumn2: '180' }
] ;

ko.applyBindings(new ViewModel(model,columns));