单元格内的 Knockout KOGrid 超链接

Question

我有一个 ASP.Net MVC5 应用程序，其中 returns 多个字段的视图模型，其中一个包含 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>
}

以及我的knockout 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

Answer 1

custom cell templates的文档很好：

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

因此您只需使用 $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>'

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

单元格内的 Knockout KOGrid 超链接

Knockout KOGrid Hyperlink within a cell

knockout.js

kogrid

knockout-3.0