appendはBackbone.jsに基づくフォームには何の効果もありません

Question

Backbone.jsに基づいてJavascript/HTMLテンプレートを取得しました。次

 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: [] 
      }); 

     } 



    }); 

Javascriptをされています：

$(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); 
}); 

<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> 

バックボーンの一部は以下の通りです：私は、次の形式のフィールドでダイナミックなドロップダウンリストを追加する必要があります

残念ながら、.appendは選択フォームに影響を与えず、ドロップダウンは空のままです。 私はまた、同じ結果を追加する代わりに.htmlを使用しようとしました。

私はselectタグでオプションを手動で追加している場合は、それが適切に動作しますが、私は動的にそれを埋めるために必要があります...

任意のアイデア？

Answer 1

バックボーンは、追加しようとする前に、#input-to要素をhtmlに追加していない可能性が高いようです。それはどんなエラーもスローしません、それはただ静かに失敗するでしょう、そして、バックボーンは、追加の後に（空の）要素を追加します。

あなたが唯一のバックボーン後にコンテンツを追加しても「安全」である知っているが、HTMLを追加しました、そしてそれはあなたのrender方法で行われます

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

間違いなく動作するソリューションは、あなたのコードそれを追加することですrenderメソッドで要素に直接追加します。追加されたコンテンツがビューに非常に本質的である場合は、私はそれをお勧めします。

これは一貫していないと思われる場合は、多くの場合、バックボーンの設定方法によって異なります。あなたのビューを初期化する行の後にコンテンツを追加するために、おそらく安全なことです：

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

しかし、場合にのみ、安全になること：

1. 作成したときにあなたのビューが即座にレンダリングされ、そして
2. レンダリングは同期的です（外部データまたはテンプレートを最初にフェッチしません）。

希望、これは幸運を助けます。