Question

我有这个html，看起来像这样：

<div class="form-group" data-bind="if: selectedStyle">
    <label class="control-label">Style</label>
    <select class="form-control" data-bind="options: styles, optionsText: 'Name', value: 'selectedStyle'"></select>
</div>

样式填充了一个如下所示的init函数：

function init() {
    var url = window.location.pathname;
    var id = url.substr(url.lastIndexOf("/") + 1);

    $.get(competitionsUrl)
        .done(function (data) {
            $.each(data, function (i, competition) {
                if (competition.Id === id) {
                    self.id(id);
                    self.name(competition.Name);
                    self.description(competition.Description);
                    self.styleId(competition.StyleId);
                    self.logoId(competition.LogoId);
                    self.backgroundImageId(competition.BackgroundImageId);

                    self.logo = new UploadViewModel("#logo", competition.Logo);
                    self.backgroundImage = new UploadViewModel("#backgroundImage", competition.BackgroundImage);
                } else {
                    ids.push(competition.Id);
                }
            });
        })
        .always(function () {
            self.loadingCompetitions(false);
        })
        .fail(common.handleError);

    $.get(stylesUrl)
        .done(function (data) {
            $.each(data, function (i, style) {
                self.styles.push(style);
            });
        })
        .always(function () {
            self.loadingStyles(false);
        })
        .fail(common.handleError);
}

然后我创建了 subscribe 方法来处理 selectedStyle ：

self.loading.subscribe(function (loading) {
    if (!loading) {
        var styles = self.styles();

        for (var i = 0; i < styles.length; i++) {
            var style = styles[i];

            if (style.Id === self.styleId()) {
                console.log(style);
                self.selectedStyle(style);
            }
        }
    }
});

console.log（样式）会返回正确的样式，但实际选择的样式是列表中的第一个样式：（

另外值得注意的是，我设置了一个测试：

self.selectedStyle.subscribe(function (style) {
    console.log("changed");
    console.log(style);
});

在第一次订阅后触发并再次显示正确的样式，但是当我更改下拉选择时，它不会触发。

任何人都知道如何解决这个问题？

Answer 1

您将值作为文字字符串传递，您应将其作为“对象”传递

尝试删除selectedStyle

的引号

<div class="form-group" data-bind="if: selectedStyle">
    <label class="control-label">Style</label>
    <select class="form-control" data-bind="options: styles, optionsText: 'Name', value: selectedStyle"></select>
</div>

淘汰js选择的对象未被选中

1 个答案: