asp.net-mvc - 在 MVC ActionLink 中使用 Knockout 绑定(bind)

Question

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

我看过Use MVC helpers inside jquery.tmpl templates ，但是那里的解决方案不使用 knockout 模板并且将 Url 插入模型对象是不可行的(用于创建 View 模型的应用程序域模型对象将在整个应用程序中广泛使用)。

表定义:

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

( tables 是一个可观察的数组，因此是括号)。

knockout 模板定义:

<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>​

View 模型定义:

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，你让我想到了一个 anchor 元素并绑定(bind)了 href属性。

似乎答案比预期的要容易一些(通常是这样!)。

表定义:(与原始问题相同)

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

knockout 模板定义:( 更改为 href 属性的绑定(bind) )。

<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>?

View 模型定义:(与原始问题相同)

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但我已将其包含在内，因此人们可以看到如何更改请求发送到的 Controller 。