删除:动态地复制/克隆一个表单以获得额外的数据输入

Knockout: Dynamically duplicating / cloning a form for additional data entry

本文关键字：表单 一个 输入 数据 复制 动态 删除      更新时间：2023-09-26

noob alert.

我刚刚开始与淘汰赛，我有一个表单做我想要的，但我需要能够动态复制的形式，以便一组新的值可以输入&第二组结果将显示在现有数据的下面(在hr下面)。

所以基本上我需要用户能够点击一个按钮，添加另一个表单，不干扰现有的表单。然后根据需要添加更多的表单(具体来说，最多5个)，所有的数据集都显示在彼此的下方。

为代码块感到抱歉，但我不确定我可以安全地删除什么。我在http://jsfiddle.net/GEKst/1/创建了一个小提琴。

任何提示都非常感谢。

<body>
    <!-- This is a *view* - HTML markup that defines the appearance of your UI -->
    <p>Sample rate (Hz):
        <select data-bind="options: sampleRate, value: selectedSampleRate"></select>
    </p>
    <p>MCLK frequency:
        <select data-bind="options: mclk, value: selectedMclk"></select>
    </p>
    <p>TDM channels per line:
        <select data-bind="options: tdmChans, value: selectedTdmchan"></select>
    </p>
    <hr/>
    <!-- render the json -->
    <p class="code">&lt;sample_rate&gt;<span data-bind="text: selectedSampleRate"></span>&lt;&#47;sample_rate&gt;
        <br/>&lt;mclk&gt;<span data-bind="text: selectedMclk"></span>&lt;&#47;mclk&gt;
        <br/>&lt;tdm_chan&gt;<span data-bind="text: selectedTdmchan"></span>&lt;&#47;tdm_chan&gt;
    </p>
</body>

Js: 

window.onload = startKnockout;
function AppViewModel() {
    var self = this;
    <!-- declare observables -->
    self.selectedSampleRate = ko.observable();
    self.selectedMclk = ko.observable();
    self.selectedTdmchan = ko.observable();
// Define controls
    self.sampleRate = ko.observableArray(['192000', '176400', '96000', '88200', '48000', '44100'])
    self.mclk = ko.observableArray(['AUDIO_MCLK_49M', 'AUDIO_MCLK_24M', 'AUDIO_MCLK_12M', 'AUDIO_MCLK_6M', 'AUDIO_MCLK_3M'])
    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);
}
// Activates knockout.js
function startKnockout() {
    ko.applyBindings(new AppViewModel());
};

将表单抽象到一个单独的视图模型中:

function FormViewModel() {
    var self = this;
    self.selectedSampleRate = ko.observable();
    self.selectedMclk = ko.observable();
    self.selectedTdmchan = ko.observable();
    self.sampleRate = ko.observableArray[/* ... */])
    self.mclk = ko.observableArray([/* ... */])
    self.tdmChans = ko.computed(function () { /* ... */ }, self);
}

…让你的AppViewModel拥有其中的几个:

function AppViewModel() {
    var self = this;
    self.forms = ko.observableArray([]);
    self.addForm = function () {
        self.forms.push(new FormViewModel());
    };
    self.canAddForm = ko.computed(function () {
        return self.forms().length < 5;
    });
}

并在视图中使用foreach绑定:

<body>
  <ul class="list-of-forms" data-bind="foreach: forms">
    <li>
      <!-- your individual form definition here -->
    </ul>
  </ul>
  <button data-bind="click: addForm, enable: canAddForm">Add Form</button>
</body>

我相信你会自己找到剩下的(比如如何制作一个"删除表单"按钮)。

您基本上需要将AppViewModel分解为单独的区域。第一部分将是表单本身，目前您所需要的只是用于保存所选值的字段。所以你就有了这个表单

function Form() {
    var self = this;
    self.selectedSampleRate = ko.observable();
    self.selectedMclk = ko.observable();
    self.selectedTdmchan = 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);
    return self;
}

那么你的ViewModel将包含一对可观察数组。一个用于采样率，一个用于Mclk，另一个用于包含已填写的表单。

var Vm = function () {
    var self = this;
    self.forms = ko.observableArray([]);
    self.addForm = function () {
        self.forms.push(new Form());
    };
    self.sampleRate = ko.observableArray(['192000', '176400', '96000', '88200', '48000', '44100']);
    self.mclk = ko.observableArray(['AUDIO_MCLK_49M', 'AUDIO_MCLK_24M', 'AUDIO_MCLK_12M', 'AUDIO_MCLK_6M', 'AUDIO_MCLK_3M']);
    return self;
}

您还需要添加一个方法来将新表单添加到ViewModel的数组中。

jsFiddle演示

相关文章：