具有下拉值的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”是显示为选项文本的内容。

在添加新通知时，在选择类型时，当下拉列表更改时，NotificationLevel应该更改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

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

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

Answer 2

测试数据中的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'
}));

参见更新的小提琴 ：

显然，使用来自服务器的适当数据，这应该更加简单：

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