c# - 结合 knockout 与 MVC4 : Use a button to toggle columns in a table.

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，当您将表格的行(如您的示例)绑定(bind)到集合中的项目列表时，“点击”命令可用于它绑定(bind)到的每个项目。

因此，根据我在您的示例中看到的内容，我将进行以下更改:

1) 将每个 Model.item 放入 ViewModel 的集合中。例如: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 绑定(bind)到该集合。例如:

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

4) 将行的单元格绑定(bind)到正确的项目。例如:

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

当 Knockout 遍历项目时(foreach..)，点击按钮将绑定(bind)到每个项目。

对于第1)点(将数据从服务端传递给客户端)，有很多种方法:

1) 使用 MVC 的实用程序生成 JSON 字符串并将该字符串放入变量“模型数据”中。使用此“模型数据”创建将包含额外可观察值和函数的项目。

2) 使用ajax 异步“获取”数据。并根据服务器返回的值填充项目。 Web API 实际上非常适合这个。请参阅 John Papa 的精彩文章:http://www.johnpapa.net/2forfree/

希望这对您有所帮助。