javascript - index - knockout js data bind text

KnockoutJS-Imprimir índice de iteración como nombre de entrada

Question

Estoy intentando crear mi primera vista de formulario KnockoutJS en combinación con el enlace @ModelAttribute Spring MVC.

• Los datos se cargan en Ajax y se completan con KnockoutJS
• Los datos se agregan a través de KnockoutJS
• Los datos se eliminan sobre Ajax y KnockoutJS
• Los datos se guardarán con un POST normal enviado al controlador Spring MVC.

Para vincular las entradas de formulario a un controlador Spring MVC, necesito el índice de iteración de KnockoutJS. Así que traté de seguir:

Pero los valores de mi base de datos nunca están ligados como están cuando los enlace con data-bind=''value: key'' . ¿Puedes ayudarme a encontrar el error?

JSP:

<form:form modelAttribute="configurationHelper" action="/saveConfigurationList.htm" method="POST" id="configuration-form" class="form-inline">
    <tbody data-bind="foreach: configurations">
        <tr>
            <td>
                // this is working
                <input data-bind=''value: key'' class="form-control input-sm" type="text"/>
                // this is not working
                <input data-bind=''attr:{value: key, name:configurationHelper.configurations[$index].key'' class="form-control input-sm" type="text"/> 
            </td>
            <td>
                <a href=''#'' data-bind=''click: $root.removeConfiguration'' class="ordinary-tooltip" title=''<spring:message code="general.delete"/>''>
                    <i class="fa fa-lg fa-trash-o "></i>
                </a>
            </td>
         </tr>
    </tbody>
</form:form>

ModelView:

function ConfigurationViewModel() {
    var self = this;
    self.configurations = ko.observableArray([]);

    self.loadConfigurations = function() {
        $.ajax({
            type : "POST",
            url : "/loadConfigurationList.htm",
            success : function(response) {
                var responseArray = JSON.parse(response);
                var mappedConfigurations = $.map(responseArray.configurations, function(configuration) {
                    return new Configuration(configuration);
                });
                self.configurations(mappedConfigurations);
            },
            error : function(e) {
                alert(''Error: '' + e.status);
            }
        });
    }

    self.saveConfigurationList = function() {
        $("#configuration-form").submit();
    }

    self.addConfiguration = function() {
            self.configurations.push({
                id: 0,
                key: "",
                value: "",
        });
    };

    self.removeConfiguration = function(configuration) {
        if(confirm(springMessageGeneralDeleteReally)){
            $.ajax({
                type : "POST",
                url : "/deleteConfiguration.htm",
                data: {"configurationId": configuration.id},
                success : function(response) {
                    self.configurations.remove(configuration);
                },
                error : function(e) {
                    alert(''Error: '' + e.status);
                }
            });
        }
    };
}


function Configuration(data) {
    this.id = ko.observable(data.id);
    this.key = ko.observable(data.key);
    this.value = ko.observable(data.value);
}

Resumen:

• Knockout solo debería encargarse de vincular los valores (cargados con AJAX) a las entradas y mostrar el nombre de entrada correcto. (para vincular el valor de entrada al controlador Spring MVC)
• configurationHelper es un parámetro de solicitud y no debería molestar Knockout. Solo está disponible para vincular la lista de configurationHelper.configurations a Spring MVC.

La siguiente forma está ligada al controlador Spring MVC:

<form:form modelAttribute="configurationHelper" action="/leina16/configuration/saveConfigurationList.htm" method="POST" id="configuration-form" class="form-inline">
    <form:input path="configurations[0].key" class="form-control input-sm"/>
</form:form>

Ahora quiero ampliar las entradas con Knockout JS, así que necesito al menos el atributo de data-bind así como el foreach: $index from Knockout:

<tbody data-bind="foreach: configurations">
    <input data-bind=''attr:{value: key, name:"configurations[$index].key}'' class="form-control input-sm" type="text"/>
</tbody>

Pero el recorte anterior no está vinculado al método de controlador Spring MVC ni los valores están llenos.

Answer 1

Le falta un archivo } y es probable que obtenga un error acerca de que Knockout no puede analizar los enlaces.

Cambio:

''attr:{value: key, name:configurationHelper.configurations[$index].key''

A:

''attr:{value: key, name:configurationHelper.configurations[$index].key}''

Como configurationHelper está definido fuera de su ciclo foreach , necesitará hacer referencia a esto usando $parent o $root :

''attr:{value: key, name:$parent.configurationHelper.configurations[$index].key}''

Answer 2

Solución:

Agregue comillas a los elementos "non-Knockout" y use la función $ index ().

<tbody data-bind="foreach: configurations">
    <tr>
        <td>
            <input data-bind=''attr:{value: key, name:"configurations["+$index()+"].key"}'' class="form-control input-sm" type="text"/>
        </td>

     </tr>
 </tbody>