0

Knockout.js を使用しています。ユーザーがテーブルにエントリを追加できる HTML フォームがあります。以下は私のコードです。

問題は、重複したエントリを作成できることです。私はそれを許可したくありません。

どうすれば治せますか？

HTML

<div class="span12">
  <button style="margin-bottom: 10px;" class="btn" data-bind="click: function () { ViewModel.AddIntMember() }"><i class="icon-plus"></i>Add</button>
</div>
        <div class="span8">

           <table class="table table-bordered table-condensed">
                <thead>
                    <tr>
                       <th></th>
                          <th>Name</th>                      
                                <th>Staff No</th>                       
                            </tr>
                </thead>
                <tbody data-bind="foreach: ViewModel.RiskAssessment.IntTeam">
                    <tr>
                        <td>
                            <button class="btn btn-small" data-bind="click: function () { ViewModel.StaffViewModel.Remove($data) }">
                                <i class="icon-remove"></i>
                                 Remove</button>
                         </td>
                                <td data-bind="text: Name"></td>
                                <td data-bind="text: StaffNo"></td>
                    </tr>
                </tbody>
            </table>
         </div>

関連付けられている JS 関数

AddIntMember: function () {
                    LoadStaff("", 0);
                    $("#InternalStaffPopup").bPopup({ positionStyle: "fixed", scrollBar: true });
                },


Select: function (staffMember) {
                        ViewModel.RiskAssessment.IntTeam.push({ Id: 0, RiskAssessmentId: 0, StaffNo: staffMember.StaffNo, Name: staffMember.Name });
                    },

Remove: function (staffMember) {
                        ViewModel.RiskAssessment.IntTeam.remove(staffMember);
                    },
4

1 に答える 1

1

ビューモデルに 2 つの監視可能なプロパティを追加することでこれを処理します: Name と StaffNumber です。このようなもの

self.Name = ko.observable();
self.StaffNumber= ko.observable();

次に、これらにバインドする html に入力要素を追加します。

<div class="span12">
<div>
<label for="StaffName">Street Address</label>
<input type="text" id="StaffName" data-bind="value: ViewModel.Name" />
</div>
<div>
<label for="StaffNumber">Street Address</label>
<input type="text" id="StaffNumber" data-bind="value: ViewModel.StaffNumber" />
</div>

<button style="margin-bottom: 10px;" class="btn" data-bind="click: function () { ViewModel.AddIntMember() }"><i class="icon-plus"></i>Add</button>
</div>

最後に、AddIntMember 関数で、重複を ViewModel.RiskAssessment observableArray に追加する前に確認します。

 AddIntMember: function () {
      //self.Name and self.StaffNumber contains the values the user entered
      //look through ViewModel.RiskAssessment.IntTeam for duplicates
      var isUnique = yourWayOfCheckingForDuplicates();
      if (isUnique) {
         LoadStaff("", 0);
         $("#InternalStaffPopup").bPopup({ positionStyle: "fixed", scrollBar: true });
      }
      else {
        //display to user that their entries need to be unique
      }},

楽しんで！

于 2013-02-07T17:39:02.863 に答える