Связывание нокаутом с несколькими утверждениями If

Question

Я применяю привязку к стилю и добился изменения цвета фона на основе двух сценариев. В настоящее время он говорит, что если статус «СТАРТ», сделайте фон # d10000, иначе сделайте фон # 93d667.

style: { background: ManagerStatus() == 'START' ? '#d10000' : '#93d667' } 

Я хотел бы следующую функциональность:

Если START, сделать # d10000 еще, если ПРОДОЛЖИТЬ, сделать # 93d667 еще сделать # f7f7f7

Как достичь этих нескольких операторов случай, в Перехват нокаутом?

С уважением

Александра

Answer 1

Вы избежать заполнения ваш HTML с условной логикой и создать нокаут вычисленного наблюдаемым в вашей ViewModel как так:

// or however your viewModel is currently set up. 
var viewModel = { 
    ManagerStatus: ko.observable() 
} 

viewModel.statusBackground = ko.computed(function() { 
    status = this.ManagerStatus(), 

    switch (status) { 
     case "START": return "#d10000"; 
     case "CONTINUE": return "#93d667"; 
     default: return #f7f7f7; 
    } 
}, viewModel); 

HTML

style: { background: statusBackground } 

Answer 2

You может сделать это, вставив два тернарных выражения оператора. Но это не очень хорошая идея: гораздо лучше изменить модель просмотра и включить вычисленный наблюдаемый, который возвращает цвет backgraound. Что-то вроде этого:

var vm = function() { 
    var self = this; 
    self.ManagerStatus = ko.observable(); 
    self.backgroundcolor = ko.computed(function() { 
    ManagerStatus() == 'START' 
     ? '#d10000' : ManagerStatus() == 'CONTINUE' 
         ? '#93d667' : '#f7f7f7'; 
    }); 
    return self; 
}; 

Связывание будет выглядеть так:

style: { background: backgroundcolor } 

Обратите внимание, что вы в этом случае можно использовать pure computed, вместо обычного computed.

ПРИМЕЧАНИЕ. Я показал, как написать вложенный тернарный оператор, и вы можете включить его в выражение привязки. Но, если он выглядит уродливым в определении модели представления, он еще более уродливый в выражении привязки. На самом деле, я бы не писал это так в определении модели представления. Гораздо лучше использовать цепочку if else или switch, чтобы сделать ее более читаемой.

Answer 3

Спасибо, ребята. Для справок в будущем кто-то показал мне, что у вас может быть несколько случаев в атрибуте привязки данных:

{background: ManagerStatus() == 'START'? '# d100000': (ManagerStatus() == 'CONTINUE'? '# 93d667': '# f7f7f7')}

Alexandra