从 Knockout 模板中读取多个 select 列表值

Question

我有几个小时的 Knockout 经验，我正在尝试修改现有的 Knockout 应用程序。它使用 knockout 中的模板来呈现 select 个列表的列表。

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>

当这呈现时，我得到一个 select 列表的列表，其中包含帐号，但由于每个列表都被命名为 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());

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

从 Knockout 模板中读取多个 select 列表值

Read multiple select list values from a Knockout Template

knockout.js