Javascript 抽象模板中的多个数据对象 我在JQuery和RACTVIEJS模板中开发一个独立的小部件。最初，小部件是用动态输入表单元素打开的，这些元素由AJAX调用填充。这里的电子邮件是一个静态字段。这是用户的初始视图。当用户单击小部件中的按钮时，它将验证表单并发送另一个带有验证数据的AJAX-POST调用，并在小部件模板本身的div上显示请求的响应。如果POST调用失败，应在同一div中显示一些错误消息。我已经成功地实现了小部件的初始视图和验证。下面是我的代码：

模板

<div>  <!-- all the mustache {{}} variables are coming from the loadData() ajax call -->

    {{#partial widget-header}}
    <header>
        <div >
            <a href="#"><img alt="logo"><span>{{clientID}}</span></a> 
        </div>
    </header>
    {{/partial}} {{>widget-header}}

    <section>
        <div>
            <div>
                <form>
                    <span>Complete required fields </span> {{#partial mandatory}}
                    <em>*</em> {{/partial}} 

                    {{#each items}} 
                    <div>
                        <div>
                            <label>{{dynamicField}}</label>{{>mandatory}}</div>
                        <div>
                            <input type="text" name="{{dynamicField}}" maxlength="20">

                            <div>{{dynamicFieldHelp}}</div>
                        </div>
                    </div>
                    {{/each}}

                    <div >
                        <div>
                            <label>Your Email Id</label>{{>mandatory}}
                        </div>
                        <div >
                            <input type="text" name="email">

                            <div>enter your email</div>
                        </div>
                    </div>

                    <div >
                        <input type="button" value="Submit Form" on-click="formValidate">
                    </div>
                </form>
            </div>      
        </div>
    </section>
</div>

但是我在第二次AJAX-POST调用中面临的问题。我无法在实际初始化中使用第二个

数据

字段。我如何实现这一部分？如果我在ractive中使用第二个

data

字段，它将不会调用第一个AJAX调用来显示表单元素。因此，我的理解是，在实际初始化中只能添加一个数据字段

我是否需要使用任何先进的抽象概念（如组件）来实现此部分？有人能帮我吗

---

注意：-我没有在模板中添加用于结果处理的

div

s，因为我被卡住了

您不需要两个

数据

成员；您希望

数据

包含一个单独的响应数据字段。根据您所拥有的，

数据

最初应该是：

  {
    items: [],
    response: 0
  }

我将添加一个

oninit

函数，在这里您可以进行初始AJAX调用，然后在收到响应时执行

ractive.set（“items”，items）

进行设置。使用

set

将使Ractive自动使用新项目更新视图

接下来，在

formValidate

函数中，进行AJAX调用。当响应返回时，再次使用

set

通知Ractive更改：

Ractive.set（“response”，response）

。将您的div添加到模板：

{{#response}}
<div>{{response}}</div>
{{/}}

{{#response}
{{response}}
{{/}}

您不需要两个

数据

成员；您希望

数据

包含一个单独的响应数据字段。根据您所拥有的，

数据

最初应该是：

  {
    items: [],
    response: 0
  }

我将添加一个

oninit

函数，在这里您可以进行初始AJAX调用，然后在收到响应时执行

ractive.set（“items”，items）

进行设置。使用

set

将使Ractive自动使用新项目更新视图

接下来，在

formValidate

函数中，进行AJAX调用。当响应返回时，再次使用

set

通知Ractive更改：

Ractive.set（“response”，response）

。将您的div添加到模板：

{{#response}}
<div>{{response}}</div>
{{/}}

{{#response}
{{response}}
{{/}}