jquery - Enlace de datos dinámico a propiedades anidadas en js knockout-con diálogo(asp.net mvc 3)

asp.net-mvc asp.net-mvc-3

Question

Tengo una mesa, vinculada a datos vía Knockout js. En cada fila hay un enlace que espero muestre un cuadro de diálogo modal que contendrá campos de entrada que también se vincularán con mi modelo de vista.

Este es mi modelo de vista lateral del servidor

public class ViewModel
{
    ...//String getters/setters
     public IList<SubViewModel> SubViewModels{get;set;} // contains a couple of String properties
     ...
}

Luego, lo serializo con éxito en el cliente y lo enlace a una tabla. Cada fila de la tabla tiene un enlace:

<script type="text/html" id="myRowTemplate">
    <tr>
    <td><a href="#" data-bind="click: function(){ myModel.doStuffInADialog($data) }">Do stuff in a popup</a></td>
... other editable text fields, all playing nicely

Esta función se llama correctamente, pero quiero pasar los datos de fila seleccionados actuales a la plantilla:

var viewModel = {
    ...
    doStuffInADialog: function (selectedRowData) {
        //how to pass this selectedRowData to the template?
        d.dialog({ ... jquery dialog stuff });
        ...

esta es la plantilla que quiero usar:

<script type="text/html" id="nestedPropertyTemplate">
    <div class="form-row">
        <div>
            <label>${someFieldOnNestedProperty}</label>
        </div>
        <div class="field">
            <input data-bind="value: Value"/>
        </div>            
    <br />
    </div>
</script>

y aquí está el div que usaré para el diálogo

<div data-bind=" template : { name: ''nestedPropertyTemplate'', data : SubViewModels() }" style="display: none" class="dialog">
</div>

Entonces, en resumen ... Me gustaría saber si hay una forma / la mejor manera de:

• Enlazar una plantilla a una propiedad anidada de mi objeto JSON
• Use un cuadro de diálogo jQuery para mostrar los contenidos del div que usa la plantilla, y tenga los campos dentro del diálogo enlazados a mi modelo de vista knockoutjs
• Inyectar dinámicamente los datos de la fila actual en la plantilla / diálogo

Answer 1

Si entendí su pregunta correctamente, agregaría una propiedad a su modelo de vista para almacenar la fila actualmente seleccionada, por ejemplo:

myRows: ko.observableArray(....),
myCurrentlySelectedRow: ko.observable(null)  

... luego, en su controlador de clics, establezca la fila seleccionada:

doStuffInADialog: function (selectedRowData) {   
     myCurrentlySelectedRow(selectedRowData);
     .....
}

Finalmente, vincula tu plantilla a la fila seleccionada actualmente:

<div data-bind=" template : { name: ''nestedPropertyTemplate'', data : viewModel.myCurrentlySelectedRow() }"

De esta forma, su plantilla activará y reproducirá los contenidos cada vez que la fila seleccionada cambie y satisfaga su requisito de "insertar dinámicamente los datos de la fila actual en la plantilla / diálogo".