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

Question

我的 ViewModel 中有两个 observablearray：

• 入围国家/地区
• 公司主列表

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

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

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

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

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

试试这样的

视图模型：

       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