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 に答える