Question

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

Answer 1

您基本上需要将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 Demo

Answer 2

将表单抽象为单独的viewmodel：

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>

我相信你会发现其余部分（比如如何制作一个“删除表格”按钮）。

Knockout：动态复制/克隆表单以进行其他数据输入

2 个答案: