MVC Knockout JS all'interno della finestra di dialogo JQuery

Question

Sto usando una finestra ad eliminazione diretta su una vista per visualizzare un elenco di campi (ad esempio, nome, cognome, ecc.). I campi sono elencati all'interno di un modello a eliminazione diretta utilizzando un array osservabile. Il modello contiene i seguenti campi: nome (input), traduzione (seleziona) e una funzione aggiungi/rimuovi. (Vedi sotto)

var viewModel = { 
    Fields: ko.observableArray([new Field(2, "First Name", 1), new Field(3, "Last Name", 2)]), 
    AvailableTranslations: ko.observableArray([new Translation(1, "Prefixes"), new Translation(2, "Suffixes")]), 
    remove: function(item) { 
     ko.utils.arrayRemoveItem(this.Fields, item) 
    }, 
    add: function() { 
     this.Fields.push(new Field(0, "", "")); 
    } 
}; 

var Translation = function(id, name) { 
    this.ID = id; 
    this.Name = name; 
}; 

var Field = function(id, name, translationID){ 
    this.ID = ko.observable(id); 
    this.Name = ko.observable(name); 
    this.TranslationID = ko.observable(translationID); 
}; 

Accanto all'elenco seleziona traduzione nel modello, vorrei la possibilità di aggiungere una nuova traduzione che non esiste. Quando si fa clic sul pulsante, voglio aprire una finestra di dialogo dell'interfaccia utente jquery che contiene una vista parziale che utilizza il knockout. La vista parziale conterrà un nome di traduzione, nonché un vecchio valore e un nuovo valore (entrambi i campi di testo). I vecchi e nuovi valori sono una matrice osservabile.

var viewModelPartialDialog = { 
    TranslationName: ko.observable(), 
    Values: ko.observableArray([]), 
}; 

var Value = function(id, oldVal, newVal) { 
    this.ID = id; 
    this.OldVal = oldVal; 
    this.NewVal = newVal; 
}; 

Quando l'utente invia modulo della vista parziale, desidero per renderlo un salvataggio chiamare nonché aggiornare le AvailableTranslations matrice osservabile.

Qualcuno può aiutarmi o indicarmi la direzione giusta per raggiungere questo obiettivo?

---

Grazie per l'esempio. È utile ma non esattamente quello che sto cercando di fare. Nel tuo esempio, non ero in grado di aggiungere un ObservableArray al Prodotto e quindi di avere un modello annidato all'interno del modello di modifica del dialogo.

Tornando al mio esempio originale, vorrei aggiungere nuovi campi in viewModelA, in modo simile a come avete la lista dei prodotti. Tuttavia, invece di modificare il campo nella finestra di dialogo, vorrei aprire una finestra di dialogo per aggiungere una nuova traduzione. La nuova traduzione che si apre nella finestra di dialogo sarebbe un modello di vista separato (viewModelB). Una volta aggiunti il ​​nome e i valori della traduzione, la finestra di dialogo dovrebbe essere posta in modo asincrono e quindi aggiornare la matrice osservabile AvailableTranslations del modello di visualizzazione originale (viewModelA).

Potete fornire un esempio di questa funzionalità?

Answer 1

Ecco un esempio che potrebbe essere simile a quello che si sta facendo: http://jsfiddle.net/rniemeyer/WpnTU/

Imposta la finestra di dialogo quando la pagina viene caricata, ma non aprirlo. Quindi, c'è un gestore di binding personalizzato che verrà chiamato ogni volta che viene popolato un oggetto "SelectedItem" (che potrebbe essere con un elemento esistente o un nuovo elemento).

La semplice gestore personalizzato vincolante assomiglia:

//custom binding handler that opens the jQuery dialog, if the selectedProduct is populated 
ko.bindingHandlers.openDialog = { 
    update: function(element, valueAccessor) { 
     var value = ko.utils.unwrapObservable(valueAccessor()); 
     if (value) { 
      $(element).dialog("open"); 
     } 
    } 
}