Ractive 模板中的多个数据对象

Question

我正在 jQuery 和 RactiveJS 模板中开发独立小部件。最初，小部件是用动态输入表单元素打开的，这些元素是用 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>

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 调用中遇到的问题。我无法在 ractive 初始化中使用第二个 data 字段。我该如何实施这部分？如果我在 ractive 中使用第二个 data 字段，它不会调用第一个 AJAX 调用来显示表单元素。所以我的理解是 only one data field can be added in the ractive initialization。

我是否需要使用任何高级的活性概念（例如组件）来实现这部分？有人可以帮我解决这个问题吗？

注意：- 我没有在模板中添加 div 用于结果处理，因为我卡住了

Answer 1

您不需要两个 data 成员；您想要的是 data 包含一个单独的响应数据字段。根据你所拥有的，data 最初应该是这样的：

  {
    items: [],
    response: 0
  }

我会在您执行初始 AJAX 调用的地方添加一个 oninit 函数，然后在您收到响应时执行 ractive.set("items", items) 来设置它。使用 set 将导致 Ractive 使用您的新项目自动更新视图。

接下来，在您的 formValidate 函数中，进行 AJAX 调用。当响应返回时，再次使用 set 通知 Ractive 更改：ractive.set("response", response)。将您的 div 添加到模板：

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

Ractive 模板中的多个数据对象

Multiple data objects in Ractive template

html

javascript

ajax

jquery

ractivejs