骨幹視圖渲染不創建

剛剛開始與骨幹和幾個小時後似乎無法得到一個視圖渲染正常工作。我已經在HTML中包含了所有合適的JavaScript文件。這裏是我的腳本：骨幹視圖渲染不創建

(function($) { 
// MODELS 
var Paper = Backbone.Model.extend ({ 
    defaults : { 
     title : null, 
     author: null, 
    } 
}); 

// COLLECTIONS 
var PaperCollection = Backbone.Collection.extend({ 
    model : Paper, 
    initialize : function() { 
     console.log("We've created our collection"); 
    } 
}); 

// VIEWS 
var PaperView = Backbone.View.extend({ 
    tagName:'li', 
    className: 'resultTable', 
    events: { 
     'click .ptitle':'handleClick' 
    }, 

    initialize: function() { 
     _.bindAll(this, 'render', 'handleClick'); 
    }, 

    render: function() { 
     $(this.el).html('<td>'+this.model.get('title')+'</td>'); 
     return this; // for chainable calls 
    }, 

    handleClick: function() { 
     alert('Been clicked'); 
    } 
}); 


var ListView = Backbone.View.extend({ 
    events: { 
    //"keypress #new-todo": "createOnEnter", 
}, 

    initialize : function() { 
     console.log('Created my app view'); 
     _.bindAll(this, 'render', 'addOne', 'appendOne'); 

     this.collection = new PaperCollection(); 
     this.collection.bind('add', this.appendOne); // collection event binder 

     this.counter = 0; 
     this.render(); 
    }, 

    render : function() { 
     console.log('Render app view'); 
     $(this.el).append("<button id='add'>Add list item</button>"); 
     $(this.el).append("<p>More text</p>"); 
    // $(this.el).append("<ul></ul>"); 

    /* 
     _(this.collection.models).each(function(item){  // in case collection is not empty 
    appendOne(item); 
    }, this); */ 
    }, 

    addOne: function() { 
    this.counter++; 
    var p = new Paper(); 
    p.set({ 
    title: "My title: " + this.counter // modify item defaults 
    }); 
    this.collection.add(p); 
    }, 

    appendOne: function(p) { 
    var paperView = new PaperView({ 
    model: p 
    }); 
    $('ul', this.el).append(paperView.render().el); 
} 
}); 

var App = new ListView({el: $('paper_list') }); 
// App.addOne(); 

})(jQuery);

注意沒有得到任何錯誤，在控制檯上FF - 但在APPVIEW仍然沒有顯示任何渲染輸出）。感謝任何幫助。簡單的HTML：

<body> 
    <div class="container_16"> 


     <div class="grid_16"> 
      <div id="paper_list"> 
       Text... 

       <ul class="thelist"></ul> 
      </div> 
     </div> 
     <div class="clear"></div> 
    </div> 
</body>

來源

2011-11-23 Chris

第6行有語法錯誤 - 刪除逗號來修復它。 –

這不是語法錯誤，這是有效的。 –

你在看哪個'console.log'？我看到的第一個問題是你錯誤地傳遞了'el'參數。你真的想傳遞'＃paper_list'（只是字符串;視圖可以解決jQuery節點）。 '＃（'paper_list'）'不是在HTML中找到的任何元素。 –

這將至少讓你呈現的ListView ...

// MODELS 
var Paper = Backbone.Model.extend ({ 
    defaults : { 
     title : null, 
     author: null, 
    } 
}); 

// COLLECTIONS 
var PaperCollection = Backbone.Collection.extend({ 
    model : Paper, 
    initialize : function() { 
     console.log("We've created our collection"); 
    } 
}); 

// VIEWS 
var PaperView = Backbone.View.extend({ 
    tagName:'li', 
    className: 'resultTable', 
    events: { 
     'click .ptitle':'handleClick' 
    }, 

    initialize: function() { 
     _.bindAll(this, 'render', 'handleClick'); 
    }, 

    render: function() { 
     $(this.el).html('<td>'+this.model.get('title')+'</td>'); 
     return this; // for chainable calls 
    }, 

    handleClick: function() { 
     alert('Been clicked'); 
    } 
}); 


var ListView = Backbone.View.extend({ 
    el: '#paper_list', 

    events: { 
     "click #add": "createOnEnter", 
    }, 

    initialize : function() { 
     console.log('Created my app view'); 
     _.bindAll(this, 'render', 'addOne', 'appendOne'); 

     this.collection = new PaperCollection(); 
     this.collection.bind('add', this.appendOne); // collection event binder 

     this.counter = 0; 
     this.render(); 
    }, 

    render : function() { 
     console.log(this); 
     $(this.el).append("<button id='add'>Add list item</button>"); 
     $(this.el).append("<p>More text</p>"); 
    // $(this.el).append("<ul></ul>"); 

    /* 
     _(this.collection.models).each(function(item){  // in case collection is not empty 
    appendOne(item); 
    }, this); */ 
    }, 

    addOne: function() { 
     this.counter++; 
     var p = new Paper(); 
     p.set({ 
      title: "My title: " + this.counter // modify item defaults 
     }); 
     this.collection.add(p); 
    }, 

    appendOne: function(p) { 
     var paperView = new PaperView({ 
      model: p 
     }); 
     $('ul', this.el).append(paperView.render().el); 
    } 
}); 


$(function(){ 
    var App = new ListView(); 
});

幾件事情。首先，我初始化的document.ready內您的ListView以確保DOM準備就緒，第二，我在列表視圖中製作了el，只需#paper_list然後您可以稍後再執行$（this.el）。

我至少得到了按鈕和「更多文本」顯示...讓我知道，如果這有幫助！

來源

2011-11-23 04:01:02 jcreamer898

骨幹視圖渲染不創建

回答

相關問題