Model view controller 如何使用knockout.js实现通用CRUD网格？

我有一个非常好的网格，具有创建、检索、编辑和删除功能。我在客户端使用knockout.js，在后端使用WebAPI

我想把它扩展到许多不同的对象。本质上，我有一个列表，其中T是一个MVC视图模型，淘汰视图和视图模型应该能够根据T计算出它们应该是什么样子

是否有人知道一种简单的方法可以以网格格式显示任何viewmodel（带有基于viewmodel本身的特定编辑控件-例如日期选择器、字符串输入、下拉列表等），并具有通用CRUD函数

下面是我正在使用的退出HTML的示例（针对特定对象）：

起息日
职位日期
书
通货
货币基础
数量1
数量2
职位类型

模板如下所示：

<script id="itemsTmpl" type="text/html">
<tr>
    <td data-bind="text: valueDate.formattedDate"></td>
    <td data-bind="text: positionDate.formattedDate"></td>
    <td data-bind="text: book"></td>
    <td data-bind="text: currency"></td>
    <td data-bind="text: currencyBase"></td>
    <td data-bind="text: amount1"></td>
    <td data-bind="text: amount2"></td>
    <td data-bind="text: positionType"></td>
    <td class="buttons">
        <a class="btn" data-bind="click: $root.edit" href="#" title="edit"><i class="icon-pencil"></i></a>
        <a class="btn" data-bind="click: $root.remove" href="#" title="remove"><i class="icon-trash"></i></a>
    </td>
</tr>
</script>

<script id="editTmpl" type="text/html">
<tr>
    <td><input data-bind="datepicker: valueDate.formattedDate, datepickerOptions: { dateFormat: 'yy/mm/dd' }"/></td>
    <td><input data-bind="datepicker: positionDate.formattedDate, datepickerOptions: { dateFormat: 'yy/mm/dd' }"/></td>
    <td><input data-bind="value: book"/></td>
    <td><input data-bind="value: currency"/></td>
    <td><input data-bind="value: currencyBase"/></td>
    <td><input data-bind="value: amount1"/></td>
    <td><input data-bind="value: amount2"/></td>
    <td><input data-bind="value: positionType"/></td>
    <td class="buttons">
        <a class="btn btn-success" data-bind="click: $root.save" href="#" title="save"><i class="icon-ok"></i></a>
        <a class="btn" data-bind="click: $root.cancel" href="#" title="cancel"><i class="icon-remove"></i></a>
    </td>
</tr>
</script>

---

我希望视图和视图模型是通用的，而不是像上面那样“硬编码”。我确信一定有其他人做过类似的事情。

一个解决方案是：

AJAX调用获取JSON视图模型的列表

如果列表为空，则不显示任何内容

若列表中有项目，则选择第一个项目并浏览属性

通过在属性之间循环，开始在客户机上构建视图

将字符串作为DOM元素附加到主DIV

线控击倒

这种方法存在一些问题。如果第一个对象的属性为null，但另一个对象中存在该属性，该怎么办？如果是这样，我们不为其设置元素

更好的选择是使用内容协商获取专用模板：

---

所以GET/api/customers将返回customers，但如果您请求text/knockout模板+html，那么您将返回一个作为字符串的knockout模板，然后将其附加到DIV和wireup knockout所以服务器可以使用反射生成模板，或者为某些型号定制模板。

谢谢您的帮助-希望有人已经完成了类似的工作。如果没有，我会这样做，并把一个链接回到这个问题。我更喜欢选项2——如果我找不到任何东西，我会在接下来的几天里花一些时间在这上面else@loilo：请注意这一点，以防您感兴趣（请参考您以前的服务器/客户端模板问题）：-）

<script id="itemsTmpl" type="text/html">
<tr>
    <td data-bind="text: valueDate.formattedDate"></td>
    <td data-bind="text: positionDate.formattedDate"></td>
    <td data-bind="text: book"></td>
    <td data-bind="text: currency"></td>
    <td data-bind="text: currencyBase"></td>
    <td data-bind="text: amount1"></td>
    <td data-bind="text: amount2"></td>
    <td data-bind="text: positionType"></td>
    <td class="buttons">
        <a class="btn" data-bind="click: $root.edit" href="#" title="edit"><i class="icon-pencil"></i></a>
        <a class="btn" data-bind="click: $root.remove" href="#" title="remove"><i class="icon-trash"></i></a>
    </td>
</tr>
</script>

<script id="editTmpl" type="text/html">
<tr>
    <td><input data-bind="datepicker: valueDate.formattedDate, datepickerOptions: { dateFormat: 'yy/mm/dd' }"/></td>
    <td><input data-bind="datepicker: positionDate.formattedDate, datepickerOptions: { dateFormat: 'yy/mm/dd' }"/></td>
    <td><input data-bind="value: book"/></td>
    <td><input data-bind="value: currency"/></td>
    <td><input data-bind="value: currencyBase"/></td>
    <td><input data-bind="value: amount1"/></td>
    <td><input data-bind="value: amount2"/></td>
    <td><input data-bind="value: positionType"/></td>
    <td class="buttons">
        <a class="btn btn-success" data-bind="click: $root.save" href="#" title="save"><i class="icon-ok"></i></a>
        <a class="btn" data-bind="click: $root.cancel" href="#" title="cancel"><i class="icon-remove"></i></a>
    </td>
</tr>
</script>