1

我有一个 ASP.Net MVC5 应用程序，它返回一个视图模型到几个字段，其中一个包含一个 URL。当视图模型中的数据显示在 KO 网格中时，我希望包含超链接字段的列显示为超链接。

我试过使用 GridOptions 的 cellTemplate 属性，但没有运气:(说实话，我只是在猜测如何从 gridOptions.columnDefs 引用视图模型中字段的值，所以如果有任何提示，我将不胜感激

这是我的看法：

@model TVS.ESB.BamPortal.Website.Models.MyTasksViewModel
@using System.Web.Script.Serialization
@{
    ViewBag.Title = "My Tasks";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>@ViewBag.Title</h2>
@{  string data = new JavaScriptSerializer().Serialize(Model); }

<div id="Knockout" data-bind="koGrid: gridOptions">
</div>
<pre data-bind="text: ko.toJSON($data, null, 2)"></pre>


@section Scripts {
    <script src="~/KnockoutVM/Mytasks.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("Knockout"));
    </script>
}

以及我的淘汰赛js的相关部分：

function ViewModel(vm) {
    var self = this;
    this.myData = ko.observableArray(vm.Recs);

    this.gridOptions = {
        data: self.myData,
        enablePaging: true,
        pagingOptions: self.pagingOptions,
        filterOptions: self.filterOptions,
        columnDefs: [{ field: 'Timestamp', displayName: 'Timestamp', width: 90 },
                    { field: 'LinkToFaultsPage', displayName: 'Link to Fault', width: 80, cellTemplate: '<a data-bind="href: $parent.entity[$data.LinkToFaultsPage]" />' }
        ]
    };
};

我的视图模型从控制器发送回视图：

public class MyTasksViewModel
    {
        public int UserKey { get; set; }
        public List<MyTask> Recs { get; set; }
        public MyTasksViewModel()
        {
            Recs = new List<MyTask>();
        }
    }
    public class MyTask
    {
        public string InterchangeId { get; set; }
        public string State { get; set; }
        public DateTime Timestamp { get; set; }
        public string LinkToFaultsPage { get; set; }
        public string FaultApplication { get; set; }
        public string FaultExceptionMessage { get; set; }
        public string FaultServiceName { get; set; }
    }

每个LinkToFaultsPage字段都包含一个 url

4

1 回答 1

2

自定义单元格模板的文档非常好：

$parent.entity是行的当前实体，因此在您的案例MyTask对象中。

所以你可以用它$parent.entity.LinkToFaultsPage来访问你的财产

cellTemplate: '<a data-bind="attr: { href: $parent.entity.LinkToFaultsPage}" >Click Me</a>'

请注意，在您的原始代码中，您没有正确的attr绑定，并且您还需要向元素添加一些内容（例如文本“Click Me”），以便浏览器呈现实际的超链接。

如果要使用还可以使用数组索引器语法：

cellTemplate: '<a data-bind="attr: { href: $parent.entity[\'LinkToFaultsPage\']}" >Click Me</a>'

如果您需要有关单元格模板的更多信息，您还可以查看单元格模板库

于 2016-03-20T13:28:06.967 回答