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>

也许我需要以不同的方式解决这个问题才能让事情发生变化？任何见解都会非常感激。

Answer 1

问题是你给绑定实际可观察值（imageSrc()）的值而不是可观察引用（imageSrc）。所以你的输入应该是这样的：

<input type="text" data-bind="attr: { id: title + '_imageSrc' }, value: imageSrc" />

这是一个工作小提琴： http://jsfiddle.net/jbbt2/

生成可编辑的表单部分并观察其输入值以更新模型

1 个答案: