具有下拉值的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;
});