KnockoutJS-将迭代索引打印为输入名称 [英] KnockoutJS - Print iteration index as input name

问题描述

我正在尝试结合Spring MVC的@ModelAttribute绑定创建我的第一个KnockoutJS表单视图.

I am trying to create my first KnockoutJS form view in combination with Spring MVC's @ModelAttribute binding.

• 数据通过Ajax加载并用KnockoutJS填充
• 数据通过KnockoutJS添加
• 通过Ajax和KnockoutJS删除数据
• 数据将通过常规POST提交保存到Spring MVC控制器.

要将表单输入绑定到Spring MVC控制器，我需要来自KnockoutJS的迭代索引.因此，我尝试了以下操作:

To bind the form inputs to a Spring MVC controller, I need the iteration index from KnockoutJS. So I tried following:

但是，当我使用data-bind='value: key'绑定它们时，我的数据库中的值就永远不会被绑定.您能帮助我，发现错误吗?

But the values from my database are never bound like they are when I am bind them with data-bind='value: key'. Can you help me, finding the mistake?

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

摘要:

• 淘汰只应注意将值(随AJAX加载)绑定到输入并显示正确的输入名称. (将输入值绑定回Spring MVC控制器)
• configurationHelper是一个请求参数，不应打扰淘汰赛.仅可将configurationHelper.configurations列表绑定到Spring MVC.

• Knockout should only take care of binding the values (loaded with AJAX) to the inputs and display the correct input-name. (to bind the input-value back to the Spring MVC controller)
• configurationHelper is a request parameter and should not bother Knockout. It is only available to bind the list of configurationHelper.configurations to Spring MVC.

以下表单已正确绑定到Spring MVC控制器:

Following form is properly bound to Spring MVC controller:

<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属性以及Knockout中的foreach: $index:

Now I want to extend inputs with Knockout JS so I need at least the data-bind attribute as well as the 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>

但是上面的片段既不绑定到Spring MVC控制器方法，也不填充值.

But the snipped above is neither bound to Spring MVC controller method nor the values are populated.

推荐答案

解决方案:

在非淘汰赛"元素上加上引号，并使用$ index()函数.

Add quotes to "non-Knockout" elements and use $index() function.

<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>

这篇关于KnockoutJS-将迭代索引打印为输入名称的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！