javascript - 使用 Knockout JS 从下拉框中添加元素到 observablearray

Question

我的 ViewModel 中有两个 observablearrays:

• 入围国家
• 公司主要名单

所有公司名称都显示在下拉框中。入围公司列在其下方。

我想通过这个演示实现两件事。

首先，用户应该能够从下拉列表中选择公司名称并将其添加到入围公司列表中。

其次，如果用户尝试对已添加到入围公司列表中的公司进行入围，则他们应该会收到一条错误消息(或警报)。

请看我在JSFiddle中的演示

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>

knockout 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());

});

看看我在 JSFiddle 中的演示

如果我遗漏了什么或者我的代码有什么问题，请告诉我。

谢谢。

亲切的问候。

希德

Answer 1

尝试这样的事情

View 模型:

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

View :

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

引用工作 fiddle here