Question

我的ViewModel中有两个observablearrays：

ShortlistedCountries
CompanyMainList

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

我想从这个演示中实现两件事。

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

其次，如果用户试图将已添加到入围公司列表中的公司列入候选名单，则应该收到错误消息（或警报）。

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

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

1 个答案: