使用 Knockout JS 从下拉框中添加项目到 observablearray

Question

我的 ViewModel 中有两个可观察数组：

入围国家
公司主列表

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

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

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

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

请看我在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>

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

尝试这样的事情

ViewModel:

       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>

参考工作fiddlehere

使用 Knockout JS 从下拉框中添加项目到 observablearray

Adding item to observablearray from a dropdown box using Knockout JS

html

javascript

css

jquery

knockout.js