Multiple data objects in Ractive template

Question

I am in the middle of the development of a standalone widget in jQuery and RactiveJS template. Initially the widget is opened with dynamic input form elements and these elements are populated with AJAX call. Here the email is a static field. This is the initial view for the user. When a user clicks on a button in the widget, it will validate the form and send another AJAX-POST call with validated data and show the response of the request on a div inside the widget template itself. If the POST call fails, some error message should be displayed in the same div. I have successfully implemented the initial view of the widget and validation. Below is my code:

Template

<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..
                },

            });

But the problem I am facing here in the second AJAX-POST call. I am not able to use a second data field in the ractive initialization. How can I implement this part ? If I use a second data field in the ractive, it will not call the first AJAX call for displaying the form elements. So my understanding is like only one data field can be added in the ractive initialization.

Do I need to use any advanced ractive concepts such as components to implement this part? Can someone help me on this.

note:- I haven't added divs for result handling in the template since I am stuck

Answer 1

You don't want two data members; what you want is for your data to contain a separate field for the response data. Based on what you have, data should initially be something like:

  {
    items: [],
    response: 0
  }

I would add an oninit function where you do the initial AJAX call, then when you get the response do ractive.set("items", items) to set it. Using set will cause Ractive to automatically update the view with your new items.

Next, in your formValidate function, make your AJAX call. When the response comes back, again use set to notify Ractive of the change: ractive.set("response", response). Add your div to the template:

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