Несколько объектов данных в Ractive template

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. Я не могу использовать второе поле data в активной инициализации. Как я могу реализовать эту часть? Если я использую второе поле data в ractive, он не будет вызывать первый вызов AJAX для отображения элементов формы. Поэтому я понимаю, что только одно поле ввода может быть добавлено в активную инициализацию.

Должен ли я использовать любые передовые концептуальные концепции, такие как компоненты для реализации этой части? Может кто-нибудь помочь мне в этом.

Примечания: - Я не добавил div с для обработки в шаблоне, так как я застрял

Answer 1

Вы не хотите два data членов результата; вы хотите, чтобы ваш data содержал отдельное поле для данных ответа. Основываясь на том, что у вас есть, data должны изначально быть что-то вроде:

{ 
    items: [], 
    response: 0 
    } 

Я хотел бы добавить oninit функцию, где вы делаете первоначальный вызов AJAX, а затем, когда вы получите ответ сделать ractive.set("items", items), чтобы установить его. Использование set заставит Ractive автоматически обновлять представление новыми элементами.

Далее, в вашей функции formValidate, сделайте свой вызов AJAX. Когда ответ вернется, снова используйте set, чтобы уведомить Ractive об изменении: ractive.set("response", response). Добавьте свой div в шаблон:

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