バックボーン - ページが更新されないビュー

Question

questionListViewでレンダリング機能を使用しようとしていますが、実行中ですが、ページを更新していません。

テンプレート：JSの

<script id="myTemplate" type="text/template"> 
<p>Test</p> 
</script> 

パート：

$(function(){ 

//Test data 
var initialListData = [ 
    { listName: "Sample Questions", listID: 1}, 
    { listName: "Default questions", listID: 2} 
]; 

// MODELS ---------------------------------------------------- 
var questionList = Backbone.Model.extend({ 
    defaults: { 
     listName: "Name of the list", 
     listID: 0 
    } 
}); 

// COLLECTIONS ---------------------------------------------------- 
var populateList = Backbone.Collection.extend({ 
    model: questionList 
}); 

// VIEWS ---------------------------------------------------- 
var questionListView = Backbone.View.extend({ 
    template: $("#myTemplate").html(), 
    render: function() { 
     console.log('I can see this, but nothing happens...'); 
     var tmpl = _.template(this.template);    
     $(this.el).append(tmpl(this.model.toJSON())); 
     return this; 
    } 
}); 


var AppView = Backbone.View.extend({ 
    el : $("#content"), 
    initialize: function(){ 
     this.collection=new populateList(initialListData); 
     this.render(); 
    }, 
    render: function(){ 
     _.each(this.collection.models, function (item) { 
      this.renderSelect(item); 
     }, this); 
    }, 
    renderSelect: function(item){ 
     var populateQuestionList = new questionListView({ 
      model: item 
     }); 
     this.$el.append(populateQuestionList.render().el); 
    } 
}); 

var app = new AppView(); 

} (jQuery)); 

ありがとう！

Answer 1

document.readyイベントのコールバックでこれをトリガーしていますか？そうでない場合は、DOMが実際にロードされ準備が完了する前にコードが実行されている可能性があります。試してください：

$(function() { 
    var app = new AppView(); 
}); 

いくつかの相違点があります。

• あなたは、バックボーンの最近のバージョンではthis.$el代わりの$(this.el)を使用することができます
• マイクロ最適化としてテンプレート関数をキャッシュするtemplate: _.template($("#myTemplate").html())を行うことができます。すでに1つの場所で実行していますが、両方ではありません。