使用 KO 访问 HTML 元素内的绑定值

Question

我有一个循环集合的视图，因此，使用 KO，它可以进行非常基本的分页。现在，表格的最后一列只是每一行记录的一堆操作。如果这是简单的 MVC 生成表，它们将在生成的 URL 中携带正确的 Id。

没有了。

@using Newtonsoft.Json
@model IEnumerable<SensorSauce.Models.Business>

@{
    ViewBag.Title = "Business Manager";
}

<h2>Business Manager</h2>

<table class="table table-striped table-bordered">

    <thead>
    <tr>
        <td><strong>@Html.DisplayNameFor(model => model.Name)</strong></td>
        <td><strong>@Html.DisplayNameFor(model => model.ServiceType)</strong></td>
        <td><strong>@Html.DisplayNameFor(model => model.Specialties)</strong></td>
        <td><strong>Actions</strong></td>
    </tr>
    </thead>

    <tbody data-bind="foreach:currentBusinesses">
    <tr>
        <td data-bind="text:Name"></td>
        <td data-bind="text:ServiceType"></td>
        <td data-bind="text:Specialties"></td>
        <td >
            <a href="@Url.Action("MapLocation", "Business")" class="glyphicon glyphicon-map-marker"></a> |
            <a href="@Url.Action("Edit", "Business")" class="glyphicon glyphicon-edit"></a> |
            <a href="@Url.Action("Details", "Business")" class="glyphicon glyphicon-search"></a> |
            <a href="@Url.Action("Delete", "Business")" class="glyphicon glyphicon-remove-sign"></a>
        </td>
    </tr>
    </tbody>

    <tfoot>
    <tr>
        <td colspan="4">
            &nbsp;<span data-bind="click:previousPage,visible:currentPage() > 1" class="glyphicon glyphicon-circle-arrow-left" style="cursor: pointer"></span>&nbsp;
            Page #: <span data-bind="text:currentPage"></span>&nbsp;
            &nbsp;<span data-bind="click:nextPage,visible:currentPage() < lastPage" class="glyphicon glyphicon-circle-arrow-right" style="cursor: pointer"></span>
        </td>
    </tr>
    <tr>
        <td >
            <a href="@Url.Action("Create", "Business")" class="btn btn-primary btn-sm btn-block"><span class="glyphicon glyphicon-plus-sign"></span> Create Business</a>
        </td>
        <td></td>
        <td></td>
        <td></td>
    </tr>

    </tfoot>

</table>

这是上表之后的脚本：

<script src="~/Scripts/knockout-3.3.0.js"></script>
<script>

    function BusinessViewModel() {
        var self = this;

        // properties
        self.businesses = @Html.Raw( JsonConvert.SerializeObject(Model, new JsonSerializerSettings { ReferenceLoopHandling = ReferenceLoopHandling.Ignore }));
        self.pageSize = 10;
        self.currentPage = ko.observable(1);
        self.lastPage = Math.ceil(self.businesses.length / self.pageSize);
        self.currentBusinesses = ko.computed(function() {
            var startIndex = (self.currentPage() - 1) * self.pageSize;
            var endIndex = startIndex + self.pageSize;

            return self.businesses.slice(startIndex, endIndex);
        });

        // methods
        self.nextPage = function() {
            self.currentPage(self.currentPage() + 1);
        };

        self.previousPage = function() {
            self.currentPage(self.currentPage() - 1);
        };
    }

    ko.applyBindings(new BusinessViewModel());
</script>

Edit、Delete 和 Details 等操作需要将参数传递给控制器​​的操作。像上面那样渲染表格会产生一个问题，即 Details 等操作永远不会收到 ID 参数。

我需要将一些东西绑定到模型的 Id 属性，并将它与 Url.Action() 方法生成的 Url 结合起来。或者我明白了。

有什么建议吗？

Answer 1

您可以使用 attr 绑定并将 URL.Action 生成的 URL 与 businessId （我假设这就是您所称的业务模型的 Id）结合起来，就像下面的示例一样......

<a data-bind="attr: { href: '@Url.Action("MapLocation", "Business")'+'?BusinessId='+BusinessId()" class="glyphicon glyphicon-map-marker"></a>