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

要編輯的行動，刪除，詳細信息等需要的參數傳遞給控制器​​的動作。像上面那樣渲染表格會產生一個問題，諸如細節之類的操作永遠不會收到ID參數。

我需要將某些內容綁定到模型的Id屬性，並將其與Url.Action（）方法生成的Url組合。或者我明白。

有什麼建議嗎？

Answer 1

您可以使用attr綁定，並通過梳理與businessId的URL.Action生成的URL（我假設是你在呼喚你的商業模式的ID），就像下面的示例...

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