Knockout.js：如何防止在表中添加重複項

Question

我正在使用Knockout.js。我有一個HTML表單，用戶可以在表格中添加一個條目。以下是我的代碼。

問題是您可以創建重複的條目。我不想這樣做。

我該如何補救它？名稱和StaffNumber：

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功能通過增加兩個可觀察性，以您的視圖模型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

我會處理這個問題。像這樣的東西

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

玩得開心！