javascript - Aria 模板 - 表单提交问题

Question

我正在尝试提交一个 aria 模板表单 http://ariatemplates.com/ ，提交完成到 Spring MVC Controller /servlet。

表单提交正常，但我无法在 Controller 中获取日期选择器、文本框等 aria 元素的值。Request.getParameter 没有用。

任何帮助将不胜感激。

这是我的示例 tpl 文件、js 文件和 Spring Controller 。

TPL 文件

    {Template {
    $classpath:'view.Turnover',
    $hasScript : true
}}
  {macro main()}
  <form action="test.do" method="POST" id="turnoverform">
  <div style="float:left;padding-top: 3em;padding-bottom: 3em;padding-right: 3em;">
    {@aria:Div {
       sclass : "basic",
       width : 740,
       height : 300
       }}

        <p style="font-family:Arial,Helvetica,sans-serif;font-size: medium;">Create Turnover Report</p>
        <hr />

        {@aria:DatePicker {
            label: " begin date:",
            labelWidth:190,
            width:330,
            helptext:"Type date or select",

        }/}
        {@aria:DatePicker {
            margins:"x x x 20",
            label: "end date:",
            labelWidth:190,
            helptext:"Type date or select",
            width:330,

        }/}
        <br/>
        <br/>
        <br/>

        {@aria:TextField {
          label : "User id",
          labelPos : "left",
          helptext : "ID",
          width : 250,
          block : true,
          labelWidth : 80,
          bind : {
            "value" : {
              inside : data,
              to : 'value' }
          }
    }/}
    <br />


   {/@aria:Div}
   <br />
   {@aria:IconButton {
      icon: "std:confirm",
      label:"Create",
      width : 300,
      tooltip : "Click on this to create a Report",
      block: true,
      onclick : {
        fn : buttonClick
      }
    } /}
  </div>
  </form> 
 {/macro}
{/Template}

JavaScript 文件:

 Aria.tplScriptDefinition({
  $classpath : "view.TurnoverScript",
  $prototype : {
    /**
     * Callback for the click event on the first button.
     * @param {aria.DomEvent} evt Click event
     */
    buttonClick : function (evt) {


      aria.core.IO.asyncFormSubmit({
          formId : "turnoverform",
          callback : {
            fn : this.onSuccess,
            onerror : this.onError,
            scope : this
          }
        });
    },

    onSuccess : function (evt, args) {


        alert("The Template has been created");
        //this.$json.setValue(["view:Dialog"], "dialogOpen", true);

      },



      onError : function (evt, args) {


          alert("The Template has not been created due to some Error");

        }
  }
});

Answer 1

在 Aria 模板中，您通常使用的不是 DOM 元素，而是数据模型。

实现您想要的方法是使用 bind 属性将这些值绑定(bind)到数据模型

{@aria:DatePicker {
    label: " begin date:",
    labelWidth:190,
    width:330,
    helptext:"Type date or select",
    bind : {
        value : {
            inside : data,
            to : "begin_date"
        }
    }
}/}

您的数据模型现在将包含这些值，尝试修改这些值并在您的模板脚本中查看 this.data 的内容。

要提交数据，您有两种选择，

• 模板脚本通过 aria.core.Io.asyncRequest (或者可能是 RequestMgr，具体取决于您的应用程序的复杂性)。此方法采用 data 字符串，在 POST 请求的情况下是消息正文。它必须是一个字符串，以便您可以使用 aria.utils.json.JsonSerializer.serialize() 将您的数据模型转换为一个字符串。

  aria.utils.json.JsonSerializer.serialize(this.data, config)

在前面的代码片段中，config 是可选的，如果提供它应该匹配这个 bean .

• 模块 Controller 通过 submitJsonRequest使用 Controller 的好处是，您可以将连接到服务器的逻辑与模板分开，并且可以直接将对象作为数据发送，序列化是在内部完成的。缺点是您可能必须配置您的 UrlService将操作转换为实际 URL。更多信息 here