Birden çok veri nesnesi Ractive şablonunda

Question

jQuery ve RactiveJS şablonunda bağımsız bir pencere aracının geliştirilmesinin ortasındayım. Başlangıçta widget, dinamik giriş form elemanları ile açılır ve bu elemanlar AJAX çağrısı ile doldurulur. İşte e-posta statik bir alan. Bu kullanıcının ilk görünümüdür. Bir kullanıcı, widget'daki bir düğmeyi tıkladığında, formu doğrular ve doğrulanmış verilerle başka bir AJAX-POST çağrısı gönderir ve bu isteğin yanıtını, widget şablonunun kendisinde bulunan bir div üzerinde gösterir. POST çağrısı başarısız olursa, aynı div'da bazı hata mesajları görüntülenmelidir. Widget ve onaylamanın ilk görünümünü başarıyla uygulamıştım.

Şablon

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

      }); 

Ama ikinci AJAX POST çağrısında burada Karşılıklı sorun: Aşağıda benim kodudur. Reaktif başlatmada ikinci bir data alanını kullanamıyorum. Bu bölümü nasıl uygulayabilirim? Reaktifde ikinci bir data alanı kullanırsam, form öğelerini görüntülemek için ilk AJAX çağrısını çağırmaz. Yani benim anlayışım gibi sadece bir veri alanı, raptik başlatmada eklenebilir.

Bu parçayı uygulamak için bileşenler gibi gelişmiş ritimli kavramları kullanmam gerekir mi? Birisi bana bu konuda yardımcı olabilir.

not: - Ben iki data üye istemiyoruz

Answer 1

şaşırıp beri şablonda işleme sonucu için div s eklememiş; İstediğiniz şey, yanıt verisi için ayrı bir alan içermesi için data numaranız içindir. Sana ilk AJAX çağrısı yapmak bir oninit fonksiyonu, sen yanıtı alınca ardından ayarlamak ractive.set("items", items) yapmak eklersiniz

{ 
    items: [], 
    response: 0 
    } 

: ne var dayanarak, data başlangıçta gibi bir şey olmalıdır. set'u kullanmak, Ractive'in yeni öğelerle görünümü otomatik olarak güncellemesine neden olur.

Sonraki, formValidate işlevinde, AJAX çağrınızı yapın. Yanıt geri geldiğinde, ractive.set("response", response) değişikliğini bildirmek için tekrar set kullanın. Sayfanızı şu şablona ekleyin:

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