我有一个 ASP.Net MVC5 应用程序，我在其中添加了几个使用出色的 KnockoutJs KoGrid ( http://knockout-contrib.github.io/KoGrid/#/examples ) 的视图。我的问题是我创建了使用 KoGrid 的第三个视图，尽管遵循其他视图上使用的模式，但我无法说服 KoGrid 显示数据。我在这里为这个问题创建了一个 plnkr：http://plnkr.co/edit/0OaqD2?p= preview。
“真实”视图有几个选项卡，第一个显示数据库详细信息，第二个应在 ko 网格中显示工作流规则。这是我从控制器返回的视图模型：
public class AdminViewModel
{
public DatabaseDetails DatabaseDetails { get; set; }
public List<WorkflowRule> WorkflowRules { get; set; }
}
public class WorkflowRule
{
public int WorkflowRuleId { get; set; }
public string ReceivePortName { get; set; }
public string MessageType { get; set; }
public string TriggerSource { get; set; }
public string TargetEmailAddress { get; set; }
public int AssignedToId { get; set; }
public string AssignedToName { get; set; }
}
public class DatabaseDetails
{...
我的淘汰 vm 如下（我已删除样板分页代码以保持更简洁）：
function ViewModel(vm) {
var self = this;
this.workflowRules = ko.observableArray(vm.WorkflowRules);
this.getPagedDataAsync = function (pageSize, page, searchText) {
setTimeout(function () {
var data;
if (searchText) {
var ft = searchText.toLowerCase();
$.getJSON('/Admin/GetDataPage', { tabName: "WorkflowRules", pageSize: pageSize }, function (returnedPayload) {
data = returnedPayload.filter(function (item) {
return JSON.stringify(item).toLowerCase().indexOf(ft) != -1;
});
self.setPagingData(data,page,pageSize);
});
} else {
$.getJSON('/Admin/GetDataPage', { tabName: "WorkflowRules", pageSize: pageSize }, function (returnedPayload) {
self.setPagingData(returnedPayload, page, pageSize);
});
}
}, 100);
};
this.gridOptions = {
afterSelectionChange: function () { return true; },
data: self.workflowRules,
enablePaging: true,
pagingOptions: self.pagingOptions,
filterOptions: self.filterOptions,
selectWithCheckboxOnly: true,
selectedItems: self.selected,
canSelectRows: true,
displaySelectionCheckbox: true,
columnDefs: [{ field: 'ReceivePortName', displayName: 'Receive Port', width: 130 },
{ field: 'MessageType', displayName: 'Message Type', width: 200 },
{ field: 'TriggerSource', displayName: 'Source', width: 60 },
{ field: 'TargetEmailAddress', displayName: 'Email', width: 130 },
{ field: 'AssignedToName', displayName: 'Assigned To', width: 140 },
]
};
};
我的观点的关键部分如下：
@model TVS.ESB.BamPortal.Website.Models.AdminViewModel
@using System.Web.Script.Serialization
@{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Layout.cshtml";
}
@{ string data = new JavaScriptSerializer().Serialize(Model); }
<div class="tab-pane" id="WorkflowRules">
<h4>Workflow Rules</h4>
<div id="KoGrid" data-bind="koGrid: gridOptions"></div>
</div>
@section Scripts {
<script src="~/KnockoutVM/WorkflowRules.js"></script>
<link rel="stylesheet" type="text/css" href="~/Content/KoGrid.css">
<script type="text/javascript">
var vm = new ViewModel(@Html.Raw(data));
ko.applyBindings(vm, document.getElementById("KoGrid"));
</script>
}
这是 Chrome 如何显示视图的屏幕截图：
谁能告诉我哪里出错了 - 为什么网格中没有显示数据？
我刚刚意识到，如果我减小显示 kogrid 的浏览器的大小，那么数据就会出现。我在这里制作了一个简短的视频：http: //biztalkers.com/video/kogridproblem.mp4