MVC knockout JS dentro del cuadro de diálogo JQuery

Question

Estoy usando knockout js en una vista para mostrar una lista de campos (es decir, nombre, apellido, etc.). Los campos se enumeran dentro de una plantilla knockout utilizando una matriz observable. La plantilla contiene los siguientes campos: nombre (entrada), traducción (seleccionar) y una función para agregar/eliminar. (Ver más abajo)

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); 
}; 

Al lado de la traducción en la lista de selección en la plantilla, me gustaría una opción para añadir una nueva traducción que no existe. Cuando se hace clic en el botón, quiero abrir un cuadro de diálogo de la IU de jquery que contiene una vista parcial que utiliza el knockout. La vista parcial contendrá un nombre de traducción, así como un valor antiguo y un nuevo valor (ambos campos de texto). Los valores antiguos y nuevos son una matriz observable.

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

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

Cuando el usuario envía el formulario de la vista parcial, me gustaría hacer una serie observables salvar a llamar, así como actualizar los AvailableTranslations.

¿Alguien puede ayudarme o señalarme en la dirección correcta para lograr esto?

---

Gracias por el ejemplo. Es útil, pero no es exactamente lo que estoy tratando de hacer. En su ejemplo, no pude agregar un Arreglo observable al Producto y luego tener una plantilla anidada dentro de la plantilla de edición del diálogo.

Volviendo a mi ejemplo original, me gustaría agregar nuevos campos en viewModelA, similar a cómo tiene la lista de productos. Sin embargo, en lugar de editar el campo en el cuadro de diálogo, me gustaría abrir un cuadro de diálogo para agregar una nueva traducción. La nueva traducción que se abre en el cuadro de diálogo sería un modelo de vista separado (viewModelB). Una vez que se agreguen el nombre y los valores de la traducción, el diálogo se publicará de forma asíncrona y luego se actualizará la matriz observable del modelo de vista original (viewModelA) AvailableTranslations.

¿Puede proporcionarnos un ejemplo de esta funcionalidad?

Answer 1

Aquí es un ejemplo que podría ser similar a lo que está haciendo: http://jsfiddle.net/rniemeyer/WpnTU/

Se establece el diálogo cuando se carga la página, pero no lo abre. Luego, hay un controlador de enlace personalizado que se llamará siempre que se llene un elemento observable "selectedItem" (que podría estar con un elemento existente o un elemento nuevo).

El simple controlador personalizado de unión se ve así:

//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"); 
     } 
    } 
}