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>