KnockoutJS - вывести индекс итерации в качестве входного имени

Я пытаюсь создать свое первое представление формы KnockoutJS в сочетании с привязкой Spring MVC @ModelAttribute.

  • Данные загружаются через Ajax и заполняются KnockoutJS.
  • Данные добавляются через KnockoutJS
  • Данные удаляются через Ajax и KnockoutJS
  • Данные будут сохранены при обычной отправке POST на контроллер Spring MVC.

Чтобы связать входные данные формы с контроллером Spring MVC, мне нужен индекс итерации из KnockoutJS. Итак, я попробовал следующее:

Но значения из моей базы данных никогда не связываются, как если бы я связывал их с помощью data-bind='value: key'. Можете ли вы помочь мне, найти ошибку?

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>

МодельВью:

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

Обзор:

  • Knockout должен заботиться только о привязке значений (загруженных с помощью AJAX) к входам и отображать правильное имя ввода. (чтобы привязать входное значение обратно к контроллеру Spring MVC)
  • configurationHelper является параметром запроса и не должен беспокоить Knockout. Доступно только для привязки списка configurationHelper.configurations к Spring MVC.

Следующая форма правильно привязана к контроллеру 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>

Теперь я хочу расширить входные данные с помощью Knockout JS, поэтому мне нужен как минимум атрибут data-bind, а также foreach: $index из Knockout:

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

Но обрезанное выше не привязано к методу контроллера Spring MVC, и значения не заполняются.


person Tunguska    schedule 19.08.2014    source источник


Ответы (2)



Решение:

Добавьте кавычки к элементам «не Knockout» и используйте функцию $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>
person Tunguska    schedule 20.08.2014