Question

我正在使用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 Functions asscociated

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);
                    },

Answer 1

我通过向viewmodel添加两个可观察属性来处理这个问题：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
      }},

玩得开心！

Knockout.js：如何防止在表中添加重复项

1 个答案: