Come si usa un'istruzione switch in un'associazione?

Ho un ViewModel che assomiglia:Come si usa un'istruzione switch in un'associazione?

{ 
    empName: [ 
     { name: 'NAME1' }, 
     { name: 'NAME2' } 
    ]   
}

voglio visualizzare diversi nomi di reparto secondo la mia empName mentre scorrendo name struttura utilizzando un'istruzione switch. in modo tale che l'uscita è:

Dipartimento 1
Dipartimento 2

Ho provato quanto segue:

<ul data-bind="foreach: empName"> 
     <div data-bind="switch: name"> 
     <div data-bind="case: 'Name1'"> 
      Department 1 
     </div> 
     <div data-bind="case: 'Name2'"> 
      Department 2 
     </div> 

     <div data-bind="case: $default"> 
     </div> 
    </div>

Ma ottengo il seguente output:

Dipartimento 1
Dipartimento 2
Dipartimento 1
Dipartimento 2

Come posso raggiungere questo obiettivo?

fonte

2015-04-24 ismail baig

Mi chiedo KO ha switch-case aspettando ... Quindi uno sguardo a una biblioteca . Spero che questo aiuti [Git: knockout-switch-case] (https://github.com/mbest/knockout-switch-case). L'esempio preso in prestito da [Switch-Case-Not-Working] (http://stackoverflow.com/questions/25017862/knockout-switch-case-plugin-is-not-hiding-showing-the-correct-value) è [* * here **] (http://jsfiddle.net/a5H92/1/) – Shubh

Metti il caso switch nel JS. Quindi fai un foreach su una serie di stringhe nell'HTML. – CrimsonChris

@CrimsonChris Pienamente d'accordo. Mantenere la logica più lunga/complessa fuori dalle associazioni. Suggerisco questo nella mia risposta. –

Perché non ripensare il problema un po 'e spostare questa logica in una funzione? Come regola generale, cerco di mantenere i miei binding il più semplice possibile e di inserire la logica nel mio javascript.

Ecco un esempio completo:

var viewModel = { 
    empName: [ 
     { name: 'NAME1' }, 
     { name: 'NAME2' } 
    ]   
}; 

viewModel.departmentName = function(name) { 
    var departmentName = "Department "; 

    switch (name) { 
     case "NAME2": 
      departmentName += "2"; 
      break; 
     case "NAME1": 
     default: 
      departmentName += "1"; 
      break; 
    } 

    return departmentName; 
}.bind(viewModel); 

ko.applyBindings(viewModel);

e poi nel markup:

<ul data-bind="foreach: empName"> 
    <li data-bind="text: viewModel.departmentName(name)"></li> 
</ul>

che uscite:

Dipartimento 1
Dipartimento 2

JSFiddle Demo

Su un sidenote, se davvero hanno solo due casi (che presumo non lo fai e basta semplificato per questo post), quindi utilizzare un ternario operatore nella funzione departmentName:

return name === "NAME2" ? "Department 2" : "Department 1";

fonte

2015-04-24 16:27:04

Grazie, che risolve il problema. –

Non c'è interruttore, ma è possibile utilizzare se:

<div data-bind="foreach: empName"> 
    <div data-bind="if: name == 'Name1'"> 
     Department 1 
    </div> 
    <div data-bind="if: name == 'Name2'"> 
     Department 2 
    </div> 
</div>

fonte

2015-04-24 16:03:19

Grazie. questo aiuta ma crea due div extra extra. uscita è il seguente n

Department 1

Department 2

–

I miei due centesimi !! Knockout non ha un'istruzione case switch.Come suggerito da RP Niemeyer

vincolante (https://github.com/mbest/knockout-switch-case) switch/case di Michael migliore è abbastanza flessibile e può farvi gestire facilmente questo e quelle più complicate (più Stati di vero/falso).

altro si potrebbe usare come condizione vincolante:

<!-- ko if: name == 'NAME1' --> 
    <div data-bind="if: name == 'NAME1'">Department 1</div> 
    <!-- /ko -->

Inoltre,

<div data-bind="if: name == 'NAME1'">Department 1</div>

Demo

fonte

2015-04-24 16:55:58 Surabhi

Come si usa un'istruzione switch in un'associazione?

risposta

Problemi correlati