2

现在我有以下代码：

@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>
}

因此，使用此代码，我在表格每一行的末尾都有一个“投标”。当我单击它时，它会重命名为“取消”，并且旁边会出现一个文本输入和另一个“提交”按钮（在所有行中）。

我想分开每个“投标”按钮，所以当我点击它时，只有该特定行中的那个按钮会更改为取消，并且只有在该行中才会出现文本输入和“提交”按钮。

我似乎无法为每一行分开按钮的效果。

4

1 回答 1

3

KnockoutJS 本质上是一个“客户端库”。我不确定您是否可以通过将“客户端代码”与您提到的“mvc4 服务器端代码”混合来实现您的期望。

使用 KnockoutJS，当您将表的行（如您的示例）绑定到集合中的项目列表时，“单击”命令可用于绑定到的每个项目。

因此，从我在您的示例中可以看到，我将进行以下更改：

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 绑定到该集合。前任：

<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 实际上对此非常有用。请参阅 John Papa 的精彩文章：http ://www.johnpapa.net/2forfree/

希望这可以帮助。

于 2012-10-22T12:13:22.053 回答