淘汰赛：在已使用时从数组中删除选择选项答案

【问题标题】：Knockout: remove select options from array when already in use淘汰赛：在已使用时从数组中删除选择选项
【发布时间】：2014-09-30 02:49:11
【问题描述】：

我有一个小的淘汰表格，我可以使用一个按钮来复制它，以便提供多组数据。

但是，“采样率”选择的每个值只能使用一次。例如，第一个表单默认设置为192000。因此，当我单击'add srate element' 时，生成的表单不应在Sample rate 下拉列表中包含192000 作为选项。

显然，如果第一个表单的 Sample rate 设置为其他值，则应该为第二个表单删除该值，依此类推。

添加新表单时，如何从数组中删除已选择的Sample rate，使其在表单的其他副本中不可用？考虑到视图模型的结构，这甚至是可能的？

这里有一个小提琴：http://jsfiddle.net/3lliot/x3cg131g/

已经包含了一些逻辑来防止超过 6 种形式。

任何提示将不胜感激...

HTML代码：

<body>
   <ul data-bind="foreach: forms">
      <li>
         <!-- This is a *view* - HTML markup that defines the appearance of your UI -->
         <p><span style="color:#AB0002">Sample rate element <span data-bind="text: formNum"></span></span>
         </p>
         <p>Sample rate (Hz):
            <select data-bind="options: $parent.sampleRate, value: selectedSampleRate"></select>
         </p>
         <p>TDM channels per line:
            <select data-bind="options: tdmChans, value: selectedTdmchan"></select>
         </p>
      </li>
   </ul>
   <button data-bind="click: addForm">Add &lt;srate&gt; element</button>
   <button data-bind="click: removeForm">Remove</button>
   <hr/>
   <ul data-bind="foreach: forms">
      <li>
         <!-- render the json -->
         <p class="code">&lt;srate id="<span data-bind="text: formNum"></span>"&gt;
            <br/>&nbsp;&nbsp;&lt;sample_rate&gt;<span data-bind="text: selectedSampleRate"></span>&lt;&#47;sample_rate&gt;
            <br/>&nbsp;&nbsp;&lt;tdm_chan&gt;<span data-bind="text: selectedTdmchan"></span>&lt;&#47;tdm_chan&gt;
            <br/>
         </p>
      </li>
   </ul>
</body>

JS代码：

window.onload = startKnockout;
var formNum;
var i = -1;    

function Form() {
    var self = this;

    // Declare observables
    self.selectedSampleRate = ko.observable();
    self.selectedTdmchan = ko.observable();
    self.formNum = ko.observable();

    // Define controls
    self.tdmChans = ko.computed(function() {
        if (self.selectedSampleRate() == 44100 || self.selectedSampleRate() == 48000) {
            return ['2', '4', '8', '16'];
        } else if (self.selectedSampleRate() == 88200 || self.selectedSampleRate() == 96000) {
            return ['2', '4', '8'];
        } else if (self.selectedSampleRate() == 176400 || self.selectedSampleRate() == 192000) {
            return ['2', '4'];
        } else {
            // do nothing
        }
    }, self);
    i++;
    self.formNum = i;
}

var Vm = function() {
    var self = this;
    var item = 0;

    self.forms = ko.observableArray([]);
    self.forms.push(new Form());
    item++;
    self.addForm = function() {
        if (i < 5) {
            self.forms.push(new Form());
            item++;

        } else {
            alert("Can't have more than 6 <srate> elements!")
        }
    };
    self.removeForm = function() {
        if (item > 1) {
            self.forms.splice(item - 1, 1);
            item--;
            i--;
        } else {
            alert("Must have at least one <srate> element!")
        }
    };

    self.sampleRate = ko.observableArray(['192000', '176400', '96000', '88200', '48000', '44100']);
    return self;
}

// Activates knockout.js
function startKnockout() {
    ko.applyBindings(new Vm());
};

【问题讨论】：

标签： javascript html arrays knockout.js

【解决方案1】：

看看这个：

http://jsfiddle.net/martinbooth/x3cg131g/1/

重要的是，根据以其他形式选择的内容计算可用的采样率：

self.sampleRates = ko.computed(function(){
    var formsValue = forms(),
        availableSampleRates = ko.utils.arrayFilter(allSampleRates, function(sampleRate){
            return !ko.utils.arrayFirst(formsValue, function(form){
                return form != self && form.selectedSampleRate() === sampleRate;
            });
    });

    return availableSampleRates;
});

【讨论】：