Mehrere Datenobjekte in der aktiven Vorlage

Question

Ich bin mitten in der Entwicklung eines eigenständigen Widget in jQuery und RactiveJS Vorlage. Anfänglich wird das Widget mit dynamischen Eingabeformularelementen geöffnet, und diese Elemente werden mit AJAX-Aufrufen gefüllt. Hier ist die E-Mail ein statisches Feld. Dies ist die erste Ansicht für den Benutzer. Wenn ein Benutzer auf eine Schaltfläche im Widget klickt, wird das Formular validiert und ein weiterer AJAX-POST-Aufruf mit validierten Daten gesendet und die Antwort der Anfrage auf einer div innerhalb der Widget-Vorlage selbst angezeigt. Wenn der POST-Aufruf fehlschlägt, sollten einige Fehlermeldungen in derselben div angezeigt werden. Ich habe die erste Ansicht des Widgets und die Validierung erfolgreich implementiert. Unten ist mein Code:

Vorlage

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

      }); 

Aber das Problem, das ich hier in der zweiten AJAX-POST Anruf bin vor. Ich kann kein zweites Feld data bei der ractiven Initialisierung verwenden. Wie kann ich diesen Teil implementieren? Wenn ich ein zweites data Feld in der ractive verwende, wird es den ersten AJAX Aufruf nicht aufrufen, um die Formularelemente anzuzeigen. So ist mein Verständnis wie nur ein Datenfeld kann in der ractive Initialisierung hinzugefügt werden.

Muss ich irgendwelche fortgeschrittenen ractive Konzepte wie Komponenten verwenden, um diesen Teil zu implementieren? Kann mir jemand dabei helfen?

Anmerkung: - Ich habe nicht div s für Ergebnis-Handling in der Vorlage hinzugefügt, da ich stecken bin

Answer 1

Sie wollen nicht zwei data Mitglieder; Was Sie wollen, ist, dass Ihr data ein separates Feld für die Antwortdaten enthält. Nach dem, was Sie haben, sollten data zunächst so etwas wie:

{ 
    items: [], 
    response: 0 
    } 

ich eine oninit addieren würde, wo Sie den ersten AJAX-Aufruf zu tun, dann, wenn Sie die Antwort erhalten tun ractive.set("items", items) es zu setzen. Wenn Sie set verwenden, aktualisiert Active die Ansicht automatisch mit Ihren neuen Elementen.

Als nächstes, in Ihrer formValidate Funktion, machen Sie Ihren AJAX Anruf. Wenn die Antwort zurückkommt, verwenden Sie erneut set, um Ractive die Änderung mitzuteilen: ractive.set("response", response). Fügen Sie Ihr div der Vorlage hinzu:

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