結合Knockout和MVC4：使用按鈕切換表格中的列。

Question

現在我有以下代碼：所以用這個代碼

@model IEnumerable<MvcAuction.Models.Furniture> 
@{ 
    ViewBag.Title = "Search"; 
} 
<hgroup class="title"> 
    <h1>@ViewBag.Title.</h1> 
</hgroup> 
@using (Html.BeginForm("SearchIndex", "Furniture", FormMethod.Get)) 
{  
    <p> 
     Description: @Html.TextBox("SearchString") 
     <input type="submit" value="Search" /></p> 
} 
<table class="searchResults"> 
    <tr> 
     <th> 
      @Html.DisplayNameFor(model => model.Description) &nbsp 
     </th> 
     <th> 
      @Html.DisplayNameFor(model => model.EndingDate) &nbsp 
     </th> 
     <th> 
      @Html.DisplayNameFor(model => model.Category) &nbsp; 
     </th> 
     <th> 
      @Html.DisplayNameFor(model => model.Price) &nbsp; 
     </th> 
     <th> 
     </th> 
    </tr> 
    @foreach (var item in Model) 
    { 
      <tr> 
      <td> 
       @Html.DisplayFor(modelItem => item.Description) 
      </td> 
      <td> 
       @Html.DisplayFor(modelItem => item.EndingDate) 
      </td> 
      <td> 
       @Html.DisplayFor(modelItem => item.Category) 
      </td> 
      <td> 
       @Html.DisplayFor(modelItem => item.Price) 
      </td> 
      <td> 
       <button data-bind="click: toggleBidInput "> 
        <span data-bind="text: bidCancel"></span> 
       </button> 
      </td> 
      <td> 
       <input data-bind="visible: bidInputVisible" /> 
       <button data-bind="visible: bidInputVisible"> 
        Submit</button> 
      </td> 
     </tr> 
    } 
</table> 
@section Scripts{ 
@Scripts.Render("~/Scripts/knockout-2.1.0.js") 
<script type="text/javascript"> 
    function ViewModel() { 
     var self = this; 
     self.bidInputVisible = ko.observable(false); 
     self.bidCancel = ko.observable("Bid"); 
     self.toggleBidInput = function() { 
      self.bidInputVisible(true); 
      self.bidCancel("Cancel"); 
     }; 
    } 
    ko.applyBindings(new ViewModel()); 

</script> 
} 

我有一個「競價」在表的每一行的末尾。 當我點擊它時，它會被重命名爲「取消」，並在其旁邊顯示一個文本輸入和另一個「提交」按鈕（在所有行中）。

我想分開每個「出價」按鈕，因此當我點擊它時，只有那個特定行中的按鈕變爲取消，只有在該行出現文本輸入和「提交」按鈕。

我似乎無法分開每個單獨的行按鈕的影響。

Answer 1

KnockoutJS本質上是一個「客戶端庫」。我不確定您是否能像您提到的那樣將「客戶端代碼」與「mvc4服務器端代碼」混合在一起，從而實現您的期望。

使用KnockoutJS，當你將一個表的行（例如你的例子）綁定到一個集合中的項目列表時，「click」命令可以被綁定到的每個項目都可用。

所以，從我可以在你的例子看，我會做以下修改：

1）把每個Model.item視圖模型內的收藏。例如：self.items = ko.observable([])

有很多方法來實現這一點，但對於這個例子的目的，只是試試這個：

self.items = ko.observableArray([ 
    { 
     itemDescription: 'desc 1', 
     itemEndingDate: '2012.01.01', 
     itemCategory: 'abc', 
     itemPrice : 123 
    }, 
    { 
     itemDescription: 'desc 2', 
     itemEndingDate: '2012.01.02', 
     itemCategory: 'bcd', 
     itemPrice : 234 
    } 
]) 

2）把「toggleBidInput」，「bidCancel」和「toggleBidInput」內每件物品。

3）將表格的tbody綁定到該集合。例如：

<tbody data-bind="foreach:items">..</tbody> 

4）將行的單元格綁定到適當的項目。例如：

<tr> 
    <td> 
     <span data-bind="text:itemDescription"></span> 
    </td> 
    <td> 
     <span data-bind="text:itemEndingDate"></span> 
    </td>... 

當Knockout迭代項目（foreach ..）時，點擊按鈕將綁定到每個項目。

對於點1）（從服務器傳送數據到客戶端），有很多方法：

1）使用MVC的工具來生成JSON字符串，並將該字符串變量「模型數據」。使用這個「模型數據」來創建將包括額外的可觀測量和功能的項目。

2）使用ajax異步「獲取」數據。並從服務器返回的值中填充項目。實際上，Web API非常適合。見約翰帕帕的偉大的文章：http://www.johnpapa.net/2forfree/

希望這會有所幫助。