在 MVC ActionLink 中使用 Knockout 绑定

Question

我正在尝试利用 KnockoutJS 和 MVC 4 在表格的第一列中显示带有 ActionLink 定义的表格。显示数据本身非常简单，我没有任何问题。我遇到的问题是ActionLink的生成。

我看过Use MVC helpers inside jquery.tmpl templates，但是那里的解决方案没有使用淘汰模板并且将Url插入模型对象是不可行的（用于创建视图模型的应用程序域模型对象将通过以下方式广泛使用应用程序）。

表定义：

<table>
    <tbody data-bind="template: { name: 'dmuTableDetail', foreach: tables() }"></tbody>
</table>

（tables 是一个可观察数组，因此是括号）。

淘汰模板定义：

<script id="dmuTableDetail" type="text/html">
    <tr>
        <td>@Html.ActionLink("Details", "Details", "DMUTableCategory", new { @Id = ??? } )</td>
        <td data-bind="text:TableId"></td>
        <td data-bind="text:TableName"></td>
    </tr>
</script>​

视图模型定义：

var PageViewModel = function () {
    self = this;

    self.tables = ko.observableArray([]);

    self.readItems = function () {
        self.tables(jQuery.parseJSON('[{"TableId":1001, "TableName":"Table#1"},{"TableId":1002, "TableName":"Table#2"}]'));
    }
}

$(document).ready(function () {
    vm = new PageViewModel();
    self.readItems('');
    ko.applyBindings(vm);
});

（实际代码执行 Ajax 调用来检索数据，但上面的代码也演示了该问题）。

无论我用什么替换 ???，我都无法将 TableId 字段的值插入到 href 中。

任何帮助将不胜感激。

谢谢。

Answer 1

谢谢 Eric，你让我想到了一个锚元素并绑定了 href 属性。

似乎答案比预期的要容易一些（通常是这样！）。

表格定义：（同原题）

<table>
    <tbody data-bind="template: { name: 'dmuTableDetail', foreach: tables() }"></tbody>
</table>

敲除模板定义：（更改为href属性的绑定）。

<script id="dmuTableDetail" type="text/html">
    <tr>
        <td><a data-bind="attr: { 'href': '@Url.Action("Details", new RouteValueDictionary() { { "Controller", "DMUTableCategory" } } )/' + TableId }">Details</a></td>
        <td data-bind="text:TableId"></td>
        <td data-bind="text:TableName"></td>
    </tr>
</script>?

视图模型定义：（与原始问题相同）

var PageViewModel = function () {
    self = this;

    self.tables = ko.observableArray([]);

    self.readItems = function () {
        self.tables(jQuery.parseJSON('[{"TableId":1001, "TableName":"Table#1"},{"TableId":1002, "TableName":"Table#2"}]'));
    }
}

$(document).ready(function () {
    vm = new PageViewModel();
    self.readItems('');
    ko.applyBindings(vm);
});

您实际上不需要RootValueDictionary，但我已将其包含在内，以便人们可以看到如何更改请求发送到的控制器。

Answer 2

Knockout 完全绑定在客户端，这是在 MVC 为您的页面呈现 HTML 并将其发送回原始浏览器之后。

如果您希望 Knockout 模板能够使用在服务器上生成的 URL，那么您必须采用类似于以下的一些巧妙策略：

CSHTML：

@{
    // create a dummy URL that you can use as a template
    string hrefFormat = Url.Action("Details", "DMUTableCategory", new { id = "{ID}" });
}

<script type="javascript">
    // a global string (but you can put it where ever you need to)
    var _hrefFormat = @Html.Raw(hrefFormat)
<script>

JS：

self.readItems = function () {
    self.tables(jQuery.parseJSON('[{"TableId":1001, "TableName":"Table#1"},{"TableId":1002, "TableName":"Table#2"}]'));


    // loop through the 'tables' and add a new 'href' property to each for binding
    ko.utils.arrayForEach(self.tables(), function(table){
         table.href = _hrefFormat.replace("{ID}", table.TableId);
    });
}

您的 KO Tmpl 将每个表对象的 'href' 属性绑定到 a 标记的 href 属性：

<script id="dmuTableDetail" type="text/html">
    <tr>
        <td><a data-bind="attr: { 'href': href }">Details</a></td>
        <td data-bind="text:TableId"></td>
        <td data-bind="text:TableName"></td>
    </tr>
</script>​