CODEWITHSUNDEEP
javascriptswitch-statementknockout-2.0
codeflower
codeflower

Reputation: 75

Returning specific values from JS switch case with knockout bindings

So I have a switch case function that returns multiple options, im trying to reference each option in various knockout bindings, however its not working? 

function messageIcon (type) {
    return ko.computed(function () {
        switch (type) {
            case InteractionMessageTypes.Customer:
                return {
                    tooltip: "This message was sent by the customer",
                    icon: "icon icon-user4",
                    contentClass: "customer-message"
                };
            case InteractionMessageTypes.Agent:
                return {
                    tooltip: "This message was sent by an agent",
                    icon: "icon icon-headset",
                    contentClass: "agent-message"
                };
            case InteractionMessageTypes.Initiate:
                return {
                    tooltip: "This session has started",
                    icon: "icon icon-phone2",
                    contentClass: "system-message"
                };

<div data-bind="css: messageIcon($data.contentClass)">
  <span data-bind="css: messageIcon($data.icon), attr:{title: messageIcon($data.tooltip)}"></span>
</div>

Upvotes: 0

Views: 120

Answers (1)

codeflower
codeflower

Reputation: 75

The way around this is to change the return in each case from

 return {
                    tooltip: "This message was sent by the customer",
                    icon: "icon icon-user4",
                    contentClass: "customer-message"
                };

to 

return '<span class="icon icon-user customer-message" title="This message was sent by the customer">' + '</span>';
    }

and then data bind the html like so 

 <span data-bind="html: messageIcon($data.Type)">

                </span>

Upvotes: 0

Related Questions