我在我的 MVC 项目中使用淘汰赛 (KO)。我在服务器上创建了一个 MVC 模型(用于网格)并将其传递给视图。在视图上,它被序列化并转换为 KO 模型(使用 ko.mapping),该模型又用于绑定。然后在 HTML 中使用该绑定来创建网格。
这就是我的 MVC 网格模型的样子,然后通过 ko.mapping 将其转换为相应的 KO 模型:
public class GridModel
{
/// <summary>
/// Grid body for the grid.
/// </summary>
public GridBodyModel GridBodyModel { get; set; }
/// <summary>
/// Grid context.
/// </summary>
public GridContext GridContext { get; set; }
/// <summary>
/// Grid header for the grid.
/// </summary>
public GridHeaderModel GridHeader { get; set; }
}
public class GridBodyModel
{
/// <summary>
/// List of grid body rows.
/// </summary>
public IList<GridRowModel> Rows { get; set; }
}
public class GridContext
{
/// <summary>
/// Total number of pages. Read-only.
/// </summary>
public int TotalPages{ get; set; }
}
public class GridHeaderModel
{
/// <summary>
/// List of grid header cells.
/// </summary>
public IList<GridHeaderCellModel> Cells { get; set; }
}
很明显,主模型类 GridModel 由以下作为属性存在的类组成:
GridBodyModel:具有要在网格主体中呈现的行列表。
GridContext:具有总页数作为属性。它还具有其他属性,但这超出了本次讨论的范围。
GridHeaderModel:具有必须显示在网格标题中的单元格列表。
然后我有这个脚本,它将在新页面加载时执行。
$(document).ready(function () {
// Apply Knockout view model bindings when document is in ready state.
ko.applyBindings(Global_GridKOModel, document.getElementById("gridMainContainer"));
});
// Serialize the server model object. It will be used to create observable model.
Global_GridKOModel = ko.mapping.fromJS (<%= DataFormatter.SerializeToJson(Model) %>);
Global_GridKOModel是全局 javascript 变量。 模型是来自服务器的 MVC 网格模型。
用户可以再次在页面上执行进一步的搜索。我通过 Ajax 发布新的搜索条件来处理这个问题。在这篇文章中,创建了一个新的 MVC 模型并作为 Ajax 响应发回。然后,这个新的 MVC 模型被简单地用于使用 ko.mapping 更新 Global_GridKOModel ,这反过来又刷新了之前在新页面加载时构建的网格(使用新数据)。我就是这样做的。
$.ajax({
url: destUrl,
data: dataToSend
success: function (result) {
ko.mapping.fromJS(result, Global_GridKOModel);
},
error: function (request, textStatus, errorThrown) {
alert(request.statusText);
}
});
除以下情况外,一切正常。
发出一个没有返回结果的 Ajax 请求,即模型 GridModel 中的 GridBodyModel 和 GridHeaderModel 为空。该时间网格正确地显示没有找到任何记录。这是对的。这通过以下 HTML 绑定发生。
<!-- When no record is found. -->
<div data-bind="ifnot: GridContext.GridPager.TotalPages() > 0">
No record(s) were found.
</div>
<!-- This is actual grid table container. This is binded when records are found -->
<div data-bind="if: GridContext.TotalPages() > 0">
Grid construction happens here
</div>
现在之后,如果发出另一个 Ajax 请求,但这次返回记录(我已经用 firebug 检查了响应,并确认确实返回了记录)。这次发生了网格构造,其中访问了各种可观察的数组。例如,为以下网格构造寻呼机是我编写的一段 HTML 绑定。
<td data-bind="attr:{colspan: GridHeader.Cells().length }">
这次 KO 抛出以下错误,可以在 firebug 中看到。
无法解析绑定。消息:TypeError:GridHeader.Cells 不是函数;绑定值:attr:{colspan: GridHeader.Cells().length }
只要有记录被返回,它就可以正常工作,但是如上所述在没有返回记录后它会中断。请注意,当没有返回记录时,GridHeader 在早期响应中为空。我在 ko.mapping 中闻到了一些腥味。我认为映射可观察数组时存在一些问题。
那么我做错了什么?请问有人吗?
如果我没有清楚地提到事情,请随时要求澄清。
提前致谢。