6

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

我已经查看了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 中的字段的值。

任何帮助将不胜感激。

谢谢你。

4

2 回答 2

7

谢谢埃里克，你让我想到了一个锚元素并绑定了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但我已将其包含在内，因此人们可以看到如何更改请求发送到的控制器。

于 2012-08-10T23:21:20.433 回答
3

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>​
于 2012-08-10T03:53:54.697 回答