0

尝试在值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>

也许我需要采取不同的方式来让事情正常进行？任何见解将不胜感激。

4

1 回答 1

1

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

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

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

于 2013-10-17T01:22:58.047 回答