knockout.js - 編集可能なフォーム セクションを生成し、入力値を観察してモデルを更新する

Question

の値が変更されたときに、編集可能なスライド「モジュール」を生成しようとしていnumSlidesます。ユーザーがスライドの数を選択すると、対応するフィールドセット「モジュール」が生成され、ビューに配置されます。ただし、これらの生成された「モジュール」内の対応するフィールドをユーザーが編集したときに、スライド モデルを更新したいと考えています。値が新しいオブザーバブルであるキーを使用して変更時にオブジェクトを返そうとしても、numSlidesうまくいかないようです。

JS:

function viewModel() {

    var self = this;

    self.updateSlide = function(n) {
        return {
            title: 'slide' + (n + 1),
            imageSrc: ko.observable('img.jpg')
        };
    };

    self.numSlides = ko.observable(3);

    self.slides = ko.computed(function() {
        s = [];
        for (var i=0; i<self.numSlides(); i++) {
            s[i] = self.updateSlide(i);
        }
        return s;
    });

}

ko.applyBindings(new viewModel());

HTML:

<div id="generalinput">
    <label for="numSlides"># of slides:</label>
    <select id="numSlides" data-bind="value: numSlides, valueUpdate: 'afterkeydown'">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
    </select><br>
</div>

<div data-bind="foreach: slides">
    <fieldset data-bind="attr: { id: title }">
        <div>
            <label data-bind="attr: { for: title + '_imageSrc' }">Slide Image:</label>
            <input type="text" data-bind="attr: { id: title + '_imageSrc' }, value: imageSrc()"><br>
        </div>
    </fieldset>
</div>

おそらく、物事を機能させるために、これを別の方法で行う必要がありますか? どんな洞察も大歓迎です。