I forum Ricerca FAQ
Fai una domanda
Ultimo messaggio
laurar181
laurar181
il 22 maggio 2015 alle 11:20
843 messaggi dal 08 aprile 2009
Ho deciso di utilizzare questa libreria per gestire le traduzioni delle etichette.
Questa libreria parte dal presupposto di fare il mapping associando un ViewModel.

ad esempio:
function ViewModelTraduzioni() {
    this.chiave1 = ko.observable("Il mio Profilo");
    this.chiave2 = ko.observable("Impostazioni");
    this.chiave3 = ko.observable("Email:");
    this.chiave4 = ko.observable("Salva nuovo indirizzo e-mail");
}


e in fase di loading della pagina


ko.applyBindings(new ViewModelTraduzioni());



fino a qui tutto ok ma le traduzioni vengono restituite da un servizio ed essendo un js che metterò a livello generico nelle pagine dell'applicazioni a priori io non so come si chiama chiave1,chiave2, ecc...

Volevo sapere se c'è un modo per creare il viewmodel dinamicamente.
RispondiQuoting
BrightSoul
BrightSoul
il 28 maggio 2015 alle 07:37
11.886 messaggi dal 09 febbraio 2002
Contributi
ciao Laura,
sì, le traduzioni possono arrivare da una richiesta ajax. Non è indispensabile che il viewModel sia subito completo di tutte le informazioni perché, grazie agli observables, l'interfaccia grafica può "accorgersi" dei cambiamenti anche dopo aver chiamato il metodo applyBindings.

Questa è una possibile soluzione:
  • Nel tuo viewModel crei un'observable chiavi tipo questo, che userai successivamente per inserire tutte le tue traduzioni.
    //per ora l'oggetto che contiene le traduzioni lo lasciamo vuoto
this.chiavi = ko.observable({});
//Creiamo anche un observable per la lingua correntemente selezionata
this.linguaCorrente = ko.observable('');
  • Predisponi anche un ko.computed, che userai per "ascoltare" i cambiamenti all'observable linguaCorrente e attivare la richiesta ajax che ti serve per recuperare le traduzioni di quella determinata lingua.
    var self = this;
this.sulCambioLingua = ko.computed(function () {
    var lingua = self.linguaCorrente();
  //Avvio la richiesta ajax
    $.ajax({
    url: ...,
    success: function(data){
      //quando ricevo i dati, riassegno l'oggetto dell'observable chiavi
      self.chiavi(data);
    }
  });
});

    Nota: anziché usare un ko.computed potresti esplicitamente sottoscriverti all'aggiornamento dell'observable linguaCorrente.
  • Infine, dopo aver chiamato l'applyBindings, imposti una lingua predefinita.
    var vm = new ViewModelTraduzioni();
ko.applyBindings(vm);
vm.linguaCorrente("it");

    Questo scatenerà l'aggiornamento di linguaCorrente; la conseguente esecuzione del computed che va a recuperarti le traduzioni; e l'aggiornamento dell'observable chiavi.
  • Nell'interfaccia grafica, metti in binding le proprietà di 'chiavi' con i text degli elementi html
    <h1 data-bind="text: chiavi().nomechiave"></h1>
  • Infine, se desideri far cambiare la lingua all'utente, metti dei bottoni o dei link il cui click sia messo in binding con una funzione del viewModel che aggiorna l'observable linguaCorrente.
    <button type="button" data-bind="click: function() { selezionaLingua('it'); }">it</button>
<button type="button" data-bind="click: function() { selezionaLingua('en'); }">en</button>

    Dove selezionaLingua è una funzione del viewModel molto semplice, tipo:
    this.selezionaLingua = function(lingua){
  self.lingua(lingua);
};
    ...e questo innescherà di nuovo la richiesta ajax per l'ottenimento delle traduzioni


Trovi una demo qui:
http://jsfiddle.net/0r36ng9g/

ciao,
Moreno
Modificato da BrightSoul il 28 maggio 2015 07.38 -
Enjoy learning and just keep making
RispondiQuoting

Torna al forum | Feed RSS

ASPItalia.com non è responsabile per il contenuto dei messaggi presenti su questo servizio, non avendo nessun controllo sui messaggi postati nei propri forum, che rappresentano l'espressione del pensiero degli autori.