从敲除模板中读取多个选择列表值答案

【问题标题】：Read multiple select list values from a Knockout Template从敲除模板中读取多个选择列表值
【发布时间】：2019-06-21 15:09:44
【问题描述】：

我有几个小时的淘汰赛经验，我正在尝试修改现有的淘汰赛应用程序。它在敲除中使用模板来呈现选择列表的列表。

Tmpl 文件：

<select data-bind="options: $root.AccountIDDropList, optionsText: 'AccountID', optionsValue: 'AccountID', value: selectedAccountID.AccountID,  optionsCaption:'-- Select Account --' "></select>

HTML 文件：

<div style='margin-left: 5px;' data-bind="template: { name: 'Bank', foreach: Account }"></div>

当这呈现时，我得到一个包含帐号的选择列表列表，但由于每个列表都被命名为 selectedAccountID.AccountID，当我尝试从每个列表中获取值时，我只能得到最后一个。

var AccountModel = function(data){
    var self = this;

...
};

var viewModel = function(data) {
   var self = this
   self.selectedAccountID = ko.observable();



   self.sendMe = function(){    
        alert(ko.toJSON({ 
            this.selectedAccountID(), 

            }));
    };
};

ko.applyBindings(new viewModel());

【问题讨论】：

标签： knockout.js

【解决方案1】：

您的要求有些模糊，但是您如何看待这个解决方案

var AccountModel = function(id, name) {
  var self = this;
  self.id = id;
  self.name = name;
};

ko.applyBindings(() => {
  var self = this;

  self.accountList = [
    new AccountModel(1, 'foo'),
    new AccountModel(2, 'bar'),
    new AccountModel(3, 'stack'),
    new AccountModel(4, 'overflow')
  ];

  self.accountSelectedList = ko.observableArray([]);

  self.addAccount = () => self.accountSelectedList.push(ko.observable(self.accountList[0]));
  self.removeAccount = (index) => self.accountSelectedList.splice(index, 1);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.0/knockout-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.9.1/underscore-min.js"></script>

<script type="text/html" id="accountTemplate">
  <span data-bind="text: $index()"></span>
  <select data-bind="options: accountList, optionsText: 'name', value: account"></select>
  <a href="#" data-bind="click: () => { removeAccount($index()); }">x</a><br />
</script>

<p data-bind="template: { name: 'accountTemplate', foreach: accountSelectedList, as: 'account', noChildContext: true }"></p>

<p><input type="button" data-bind="click: addAccount" value="Add account" /></p>

<p data-bind="text: _.map(self.accountSelectedList(), function(r) { return `${r().id}: ${r().name}`; }).join(', ')"></p>

【讨论】：