我正在使用 jQuery 和 RactiveJS 模板开发一个独立的小部件。最初,小部件使用动态输入表单元素打开,并且这些元素通过 AJAX 调用填充。这里的电子邮件是一个静态字段。这是用户的初始 View 。当用户单击小部件中的按钮时,它将验证表单并使用经过验证的数据发送另一个 AJAX-POST 调用,并在小部件模板本身内的 div
上显示请求的响应。如果 POST 调用失败,则应在同一 div
中显示一些错误消息。我已经成功实现了小部件的初始 View 和验证。下面是我的代码:
模板
<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>
JavaScript
this.ractive = new Ractive({
el: 'widgetContent',
template: mainTemplate,
data: function loadData() {
$.ajax({
async: false,
url: "https://example.com/xyz/" +employeeNo,
success: function (response) {
initialData = response.payload[0];
}
});
return initialData; // return the dynamic form elements in data field.
},
oncomplete: function () {
self.center();
}
});
this.ractive.on({
formValidate: function (ev) {
validate the form and send AJAX-POST call then display the response data in a div -
this is where I am stuck..
},
});
但是我在第二个 AJAX-POST 调用中遇到了问题。我无法在事件初始化中使用第二个data
字段。我该如何实现这部分?如果我在 ractive 中使用第二个 data
字段,它不会调用第一个 AJAX 调用来显示表单元素。所以我的理解是在事件初始化中只能添加一个数据字段。
我需要使用任何高级的 react 概念(例如组件)来实现这一部分吗?有人可以帮我解决这个问题吗?
注意:- 由于我陷入困境,我还没有在模板中添加用于结果处理的 div
s
最佳答案
您不需要两个 data
成员;您希望您的 data
包含一个单独的响应数据字段。根据您所拥有的数据,data
最初应该类似于:
{
items: [],
response: 0
}
我会添加一个 oninit
函数,您可以在其中执行初始 AJAX 调用,然后当您收到响应时,执行 ractive.set("items", items)
进行设置它。使用 set
将使 Ractive 自动使用新项目更新 View 。
接下来,在 formValidate
函数中进行 AJAX 调用。当响应返回时,再次使用 set
通知 Ractive 更改:ractive.set("response", response)
。将您的 div 添加到模板中:
{{#response}}
<div>{{response}}</div>
{{/}}
关于javascript - Ractive 模板中的多个数据对象,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36374110/