Knockout.js: How to prevent adding duplicates in table

Question

I am using Knockout.js. I have an HTML form where a user can add an entry to a table. Below is my code.

Problem is that you can create duplicate entries. I don't want to allow that.

How can i remedy it?

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

I'd handle this by adding two observable properties to your viewmodel: Name and StaffNumber. Something like this

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

Then add input elements to your html where you bind to these.

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

Finally in your AddIntMember function you just check for duplicates before adding them to your 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
      }},

Have Fun!