Question

我有一个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>
}

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

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 字段都包含一个网址

Answer 1

custom cell templates的文档非常好：

$parent.entity是该行的当前实体，因此在您的情况下为MyTask对象。

因此，您只需使用$parent.entity.LinkToFaultsPage访问您的媒体资源

即可

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

请注意，在原始代码中，您没有正确的attr绑定，还需要向元素添加一些内容（例如文本＆＃34; Click Me＆＃34;）浏览器渲染出实际的超链接。

如果你想使用也可以使用数组索引器语法：

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

如果您需要有关细胞模板的更多信息，还可以查看Cell Template Library

敲除单元格内的KOGrid超链接

1 个答案: