添加項目採用淘汰賽JS

Question

我在我的ViewModel 2個observablearrays從下拉框中observablearray：

• ShortlistedCountries
• CompanyMainList

所有公司名稱將顯示在下拉框中。下面列出入圍的公司。

我想從這個演示中實現兩件事情。

首先，用戶應該能夠從下拉列表中選擇公司名稱並將其添加到入圍公司名單。

其次，如果用戶嘗試將已加入候選公司名單的公司列入名單，則應該收到錯誤消息（或警報）。

請在

HTML看看我的演示

<div> 
    <div>All Companies</div> 
    <div> 
     <div id="rdoCompanyServer"> 
      <select data-bind="options:CompanyMainList, optionsText:'CompanyName', optionsValue:'id', optionsCaption: 'Select a company...'"></select> <a href="#" data-bind="click:AddToShortlistedCountries">Add to Shortlist</a> 

     </div> 
    </div> 
</div> 
<br/> 
<br/> 
<br/> 
<div> 
    <div id="sectionHeading">My Shortlisted Companies</div> 
    <div> 
     <div> 
      <ol data-bind="foreach: ShortlistedCountries"> 
       <li><span data-bind="text:CompanyName"></span><span id="removeshortlist"> 
          <a href="#" data-bind="click: $parent.DeleteShortlistedCountries">Remove</a></span> 
       </li> 
      </ol> 
      <br /> 
     </div> 
    </div> 
</div> 

淘汰賽JS

function CompanyViewModel() { 
    var self = this; 

    self.currentDemoLicenses = ko.pureComputed(function() { 
     return self.demoLicenses().length; 
    }); 




    /* adding bookmark servers in the same view TEST */ 

    self.bookmarkedServerCount = ko.pureComputed(function() { 
     return self.ShortlistedCountries().length; 
    }); 

    self.ShortlistedCountries = ko.observableArray([{ 
     CompanyName: 'Apple Inc', 
     id: 11 
    }, { 
     CompanyName: 'TDK', 
     id: 15 
    }, { 
     CompanyName: 'Samsung', 
     id: 16 
    } 

    ]); 

    self.DeleteShortlistedCountries = function (ShortlistedCountries) { 
     self.ShortlistedCountries.remove(ShortlistedCountries); 
    }; 


    self.AddToShortlistedCountries = function() { 
     self.ShortlistedCountries.push(self.ShortlistedCountries); 
    }; 


    self.CompanyMainList = ko.observableArray([{ 
     CompanyName: 'Acer', 
     id: 1 
    }, { 
     CompanyName: 'Toshiba', 
     id: 12 
    }, { 
     CompanyName: 'Sony', 
     id: 13 
    }, { 
     CompanyName: 'LG', 
     id: 14 
    }, { 
     CompanyName: 'HP', 
     id: 6 
    }, { 
     CompanyName: 'Hitachi', 
     id: 6 
    }, { 
     CompanyName: 'Apple Inc', 
     id: 11 
    }, { 
     CompanyName: 'TDK', 
     id: 15 
    }, { 
     CompanyName: 'Samsung', 
     id: 16 
    }, { 
     CompanyName: 'Panasonic', 
     id: 7 
    }]); 
}; 


$(document).ready(function() { 
    ko.applyBindings(new CompanyViewModel()); 

}); 

有在

看看我的演示

請讓我知道，如果我錯過了一些事情或有任何問題，我的代碼。

謝謝。

親切的問候。

希德

Answer 1

嘗試是這樣的

視圖模型：

 function CompanyViewModel() { 
      var self = this; 
      self.selectedCompany = ko.observable();//has dropdown selection 

      self.ShortlistedCompanies = ko.observableArray([{ 
       CompanyName: 'Apple Inc', 
       id: 11 
      }, { 
       CompanyName: 'TDK', 
       id: 15 
      }, { 
       CompanyName: 'Samsung', 
       id: 16 
      } 

      ]); 

      var isExists = function (data) { //function checks for duplicates 
       var status = false; 
       ko.utils.arrayFirst(self.ShortlistedCompanies(), function (item) { 
        if (item.id === data.id) { 
         status = true; 
         return status; 
        } 
       }); 
       return status; 
      } 

      self.DeleteShortlistedCompanies = function (ShortlistedCompanies) { 
       self.ShortlistedCompanies.remove(ShortlistedCompanies); 
      }; 


      self.AddToShortlistedCompanies = function() { 
       if (!self.selectedCompany()) { 
        alert('select something'); 
        return; 
       } 
       if (isExists(self.selectedCompany())) { 
        alert('Cannot add duplicates'); 
        return; 
       } 
       self.ShortlistedCompanies.push(self.selectedCompany()); 
      }; 
      self.CompanyMainList = ko.observableArray([{ 
       CompanyName: 'Acer', 
       id: 1 
      }, { 
       CompanyName: 'Toshiba', 
       id: 12 
      }, { 
       CompanyName: 'Sony', 
       id: 13 
      }, { 
       CompanyName: 'LG', 
       id: 14 
      }, { 
       CompanyName: 'HP', 
       id: 6 
      }, { 
       CompanyName: 'Hitachi', 
       id: 6 
      }, { 
       CompanyName: 'Apple Inc', 
       id: 11 
      }, { 
       CompanyName: 'TDK', 
       id: 15 
      }, { 
       CompanyName: 'Samsung', 
       id: 16 
      }, { 
       CompanyName: 'Panasonic', 
       id: 7 
      }]); 
     }; 

查看：

<div id="rdoCompanyServer"> 
     <select data-bind="options:CompanyMainList, optionsText:'CompanyName', optionsCaption: 'Select a company...',value:selectedCompany"></select> <a href="#" data-bind="click:AddToShortlistedCompanies">Add to Shortlist</a> 
</div> 

僅供參考工作小提琴here