append hat keine Auswirkungen auf ein Formular basierend auf Backbone.js

Question

Ich habe eine Vorlage Javascript/HTML basierend auf Backbone.js abgerufen. Ich müsste eine dynamische Drop-Down-Liste in einem Feld der folgenden Form hinzuzufügen:

<script type="text/template" id="compose-view-template"> 
<form id="email-compose" class="form-email-compose" method="get" action=""> 
    <div class="form-group"> 
     <select type="email" id="input-to" placeholder="To" class="input-transparent form-control"> 
     </select> 
    </div> 
    <div class="form-group"> 
     <input type="text" id="input-subject" placeholder="Subject" class="input-transparent form-control" 
       value="<%= subject %>"> 
    </div> 
    <div class="form-group"> 
     <textarea rows="10" class="form-control" id="wysiwyg" placeholder="Message"><%- body %></textarea> 
    </div> 
    <div class="clearfix"> 
     <div class="btn-toolbar pull-xs-right"> 
      <button type="reset" id="compose-discard-button" class="btn btn-gray">Annuler</button> 
      <button type="submit" id="compose-send-button" onClick="fillEmailDropDown()" class="btn btn-danger">&nbsp;&nbsp;&nbsp;Envoyer&nbsp;&nbsp;&nbsp;</button> 
     </div> 
    </div> 
</form> 

</script> 

Das Rückgrat Teil ist die folgende:

 var ComposeView = Backbone.View.extend({ 


     template: _.template($('#compose-view-template').html()), 

     attributes: { 
      id: 'compose-view', 
      class: 'compose-view' 
     }, 

     events: { 
      "click #compose-save-button, #compose-send-button, #compose-discard-button": 'backToFolders' 
     }, 

     render: function() { 
      $('#widget-email-header').html(
       '<h5>Nouvel <span class="fw-semi-bold">Email</span></h5>' 
      ); 
      $('#folder-stats').addClass('hide'); 
      $('#back-btn').removeClass('hide'); 
      this.$el.html(this.template(this.model.toJSON())); 
      this._initViewComponents(); 


      return this; 
     }, 

     backToFolders: function(){ 
      App.showEmailsView(); 


     }, 

     _initViewComponents: function(){ 
      this.$("textarea").wysihtml5({ 
       html: true, 
       customTemplates: bs3Wysihtml5Templates, 
       stylesheets: [] 
      }); 

     } 



    }); 

Das Javascript ist folgende:

$(document).ready(function() { 
     var listItems = '<option selected="selected" value="0">- Select -</option>'; 
     console.log("Preparing Auto Fill of DropDown list for email adresses"); 

     for (var i = 0; i < jsonData.Table.length; i++) { 
     listItems += "<option value='" + jsonData.Table[i].stateid + "'>" + jsonData.Table[i].statename + "</option>"; 
     } 
     $("#input-to").append(listItems); 
}); 

Leider hat das .append keine Auswirkung auf das Auswahlformular und das Dropdown bleibt leer. Ich habe auch versucht, .html anstelle von append, aber das gleiche Ergebnis zu verwenden.

Wenn ich die Optionen manuell in dem select-Tag hinzugefügt, es funktioniert, aber ich brauche es dynamisch zu füllen ...

irgendeine Idee?

Answer 1

Es klingt wie das Problem ist wahrscheinlich, dass Backbone nicht das Element #input-to zu Ihrem HTML hinzugefügt hat, bevor Sie versuchen, an es anzuhängen. Das würde keine Fehler werfen, es würde einfach stillschweigend fehlschlagen, dann würde das Backbone das (leere) Element nach dem Append-Versuch hinzufügen.

Sie wissen nur es „sicher“ ist Ihre Inhalte anhängen nach Rückgrat der html hinzugefügt, und das geschieht in Ihrem render Methode:

render: function() { 
     $('#widget-email-header').html(
      '<h5>Nouvel <span class="fw-semi-bold">Email</span></h5>' 
     ); 
     $('#folder-stats').addClass('hide'); 
     $('#back-btn').removeClass('hide'); 
     this.$el.html(this.template(this.model.toJSON())); 
     // NOW IT IS SAFE TO APPEND CONTENT... 

     this._initViewComponents(); 


     return this; 
    }, 

Eine Lösung, die auf jeden Fall hinzufügen arbeiten Sie Code, hängt an das Element direkt in der render Methode an. Ich würde empfehlen, wenn der angehängte Inhalt der Ansicht sehr innewohnt.

Wenn das nicht kohärent erscheint, hängt viel davon ab, wie Ihr Backbone aufgebaut ist. Es ist wahrscheinlich sicher den Inhalt nach der Zeile anzuhängen, die Ihrer Ansicht initialisiert:

var myView = new ComposeView({}); 
// NOW APPEND CONTENT 

jedoch, dass nur sicher sein, wenn:

1. Ihre Ansicht sofort gemacht wird, wenn erstellt und
2. Die Rendern ist synchron (externe Daten oder Vorlagen werden nicht zuerst abgerufen).

Hoffe, das hilft, viel Glück.