Question

我有一个小的淘汰表单，我可以使用按钮复制，以允许提供多组数据。

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

显然，如果第一个表单的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());
};

Answer 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;
});

Knockout：在使用时从数组中删除select选项

1 个答案: