jquery - ハンドルバーとバックボーン - バックボーンの HTML が正しくレンダリングされない

Question

アンダースコアの代わりにバックボーンでハンドルバーを使用することに取り組んでいます。レンダリングされたテンプレートが、指定した実際の要素に追加されないという問題が発生します。

モデル：

ImageApp.Models.Image = Backbone.Model.extend({
defaults: {
    imagePath: '',
    description: 'No description available',
    postedOn: ''
    }
});

意見：

 ImageApp.Views.ImageView = Backbone.View.extend({
 tagName: 'ul',

 initialize: function() {
     this.render();  
 },

 render: function() {
     var compiledTemplate = Handlebars.compile($('#imageList-template').html());
     var renderedTemplate = compiledTemplate(this.model.toJSON());

     this.$el.html(renderedTemplate);

    $('#imageList').html(this.el);
 }
});

テンプレート

<script id="imageList-template" type="text/x-handlebars-template">
    <li>
        <img src='{{imagePath}}' title='{{description}} />
    </li>
</script>

これにより、img 要素を含む単一のアイテムを含む順序付けられていないリストが生成されると予想されますが、作成されるのは空のリストアイテムだけです。私が間違っていることをはっきりと見ている人はいますか？