带有下拉值的 KnockoutJS CSS 绑定

Question

在这里提琴：http://jsfiddle.net/0gmbbv5w/

我有一个从数据库中提取并绑定到 <select> 的对象

var NoticeType = function (noticeType) {
    this.NoticeTypeId = ko.observable(noticeType.NoticeTypeId);
    this.NoticeLevel = ko.observable(noticeType.NoticeLevel);
    this.FriendlyName = noticeType.FriendlyNoticeLevel;
}

这些将像这样填充在我的视图模型中

NoticeType: new NoticeType({
    NoticeTypeId: 2,
    NoticeLevel: 'info',
    FriendlyNoticeLevel: 'Informational'
})

NoticeTypeId 存储在数据库中，NoticeLevel 是绑定到元素的 CSS 类。 'FriendlyName` 是显示为选项文本的内容。

添加新通知时，选择类型时，NoticeLevel 应该随着下拉列表的变化而改变 CSS 类。

<select data-bind="options: $parent.noticeTypes, optionsText: 'FriendlyName', value: noticeType"></select>


<div class="row-fluid">
    <div class="span12">
        <div class="alert" data-bind="css: alertLevel">
            <h4>Just a reminder!</h4>
            <span>This is a sample of what your notice will look like. The header is the Subject, and this text is the Message</span>
        </div>
    </div>
</div>

在选择 CSS 类时，我能找出绑定它的唯一方法是删除 optionsValue 绑定。我的问题来自选择要编辑的项目时，绑定无法正常工作，因此编辑时的NoticeType始终显示为“基本”通知类型，因为它无法映射数据返回。

有什么方法可以做到这一点吗？还是我在这里遗漏了一些明显的东西？当添加一个新的，或者选择一个进行编辑和更改选择值时，它将正确更新 CSS 类。最初选择一个进行编辑时，它没有正确绑定 CSS 类。

self.editNotice = function (item) {
    self.noticeToAdd(new NoticeToAdd(ko.toJS(item)));
}

var NoticeToAdd = function (notice) {

    var self = this;

    if (!notice) {
        notice = {};
    }

    this.noticeId = ko.observable(notice.NoticeId || notice.noticeId);
    this.subject = ko.observable(notice.Subject || notice.subject);
    this.body = ko.observable(notice.Body || notice.body);
    this.publishDate = ko.observable(notice.PublishDate || notice.publishDate);
    this.expireDate = ko.observable(notice.ExpireDate || notice.expireDate);
    this.sticky = ko.observable(notice.Sticky || notice.sticky);
    this.includeDismiss = ko.observable(notice.IncludeDismissAction || notice.includeDismiss || true);
    this.noticeType = ko.observable(notice.NoticeType || notice.noticeType);
    this.showDismissal = ko.observable(false);

    //CSS binding
    this.alertLevel = ko.pureComputed(function() { 
        return self.noticeType() ? 'alert-' + self.noticeType().NoticeLevel() : 'alert-basic';
    });

    this.ableToAddNotice = ko.pureComputed(function () {
        return $.trim(self.body()) != "";
    });

}

Answer 1

测试数据中的 noticeType 对象与您的 noticeTypes 可观察数组中的对象不同（相反，它们是具有相同数据的不同对象）。

您需要从 noticeTypes 数组中获取确切的对象：

//Test data!
var successType = ko.utils.arrayFirst(self.noticeTypes(), function (type) {
    return type.NoticeLevel() === 'success';
});
var warningType = ko.utils.arrayFirst(self.noticeTypes(), function (type) {
    return type.NoticeLevel() === 'warning';
});
var infoType = ko.utils.arrayFirst(self.noticeTypes(), function (type) {
    return type.NoticeLevel() === 'info';
});
var dangerType = ko.utils.arrayFirst(self.noticeTypes(), function (type) {
    return type.NoticeLevel() === 'danger';
});

然后你可以像这样初始化你的测试数据：

self.notices.push(new NoticeToAdd({
    NoticeId: 1,
    Subject: 'Notice this!',
    Body: '<strong>YO!</strong> this is a supre cool notice man',
    NoticeType: successType
}));
self.notices.push(new NoticeToAdd({
    NoticeId: 2,
    Subject: 'Notice this!',
    Body: '<strong>YO!</strong> this is a supre cool notice man',
    NoticeType: warningType
}));
self.notices.push(new NoticeToAdd({
    NoticeId: 3,
    Subject: 'Notice this!',
    Body: '<strong>YO!</strong> this is a supre cool notice man',
    NoticeType: infoType
}));
self.notices.push(new NoticeToAdd({
    NoticeId: 4,
    Subject: 'Notice this!',
    Body: '<strong>YO!</strong> this is a supre cool notice man',
    NoticeType: dangerType
}));
self.notices.push(new NoticeToAdd({
    NoticeId: 5,
    Subject: 'Notice this!',
    Body: '<strong>YO!</strong> this is a supre cool notice man'
}));

查看更新的fiddle：

显然，如果有来自服务器的正确数据，这应该会简单得多：

var someType = ko.utils.arrayFirst(self.noticeTypes(), function (type) {
    return type.NoticeTypeId() === NoticeTypeIdFromTheServer;
});

Answer 2

用作options 绑定的value 的noticeType 必须是noticeTypes 数组中的对象之一。现在你告诉<select> 让选定的项目不在其列表中。这导致<select> 默认为列表中的第一个值，即“基本”选项。

一种解决方案是在noticeTypes 数组中找到“等于”现有noticeType 的对象，并将其用作value。