1

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

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

有谁知道以网格格式显示任何视图模型（具有基于视图模型本身的特定编辑控件 - 例如日期选择器、字符串输入、下拉列表等）的简单方法，并具有通用 CRUD 功能。

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

<table class="table table-striped table-bordered">
    <thead>
        <tr>
        <th>Value Date</th>
        <th>Position Date</th>
        <th>Book</th>
        <th>Currency</th>
        <th>Currency Base</th>
        <th>Amount1</th>
        <th>Amount2</th>
        <th>Position Type</th>
        <th style="width: 100px; text-align:right;" />
        </tr>
    </thead>
   <tbody data-bind=" template:{name:templateToUse, foreach: pagedList }"></tbody>
</table>

模板如下所示：

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

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

4

1 回答 1

2

一种解决方案是：

  1. AJAX 调用获取 JSON 视图模型列表
  2. 如果列表为空，则不显示任何内容
  3. 如果列表有项目，选择第一个项目并通过属性
  4. 通过遍历属性开始在客户端构建视图
  5. 将字符串作为 DOM 元素附加到主 DIV
  6. 连线淘汰赛

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

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

因此 GET /api/customers 将返回客户，但如果您请求 text/knockout-template+html 则您会以字符串形式返回敲除模板，然后附加到 DIV 和连接敲除。因此服务器可以使用反射生成模板或为某些模型自定义。

于 2012-10-09T11:13:42.790 回答