主干子视图未正确呈现

我开始使用 Backbone 开发一个网站.js经过整个上午的尝试，我非常困在以下问题上。

我在这里只输出相关的代码。

我有一个名为导航器的视图，其中包含一个记录集合（最初为空）：

var NavigatorView = Backbone.View.extend({
    template: JST['app/scripts/templates/Navigator.ejs'],
    tagName: 'div',
    id: '',
    className: 'saiNavigator',
    events: {},
    initialize: function () {
        this.currentRecords = new RecordsCollection();
        this.currentRecords.on('reset', this.onRecordsCollectionReseted.bind(this));
    },
    onRecordsCollectionReseted: function(){
        this.render();
    },
    render: function () {
        var tplResult = this.template({
            computeTemplate: this.computeTemplate,
            records: this.currentRecords
        });
        this.$el.html(tplResult);
    },
    onDOMUpdated: function(){
        var me = this;
        var data = {
            device : 'web',
            gridId : this.model.get('gridId'),
            filterId : this.model.get('filterId')
        };
        $.ajax({
            url: App.getTokenedUrl() + '/task/getGridData.'+this.model.get('taskId')+'.action',
            success: me.onRecordReceived.bind(me),
            statusCode: {
                500: App.handleInternalError
            },
            type: 'GET',
            crossDomain: true,
            data : data,
            dataType: 'json'
        });
    },
    onRecordReceived: function(result){
        var newRecords = [];
        for(var i = 0; i < result.items.length; i++){
            var newRecord = new RecordModel(result.items[i]);
            newRecords.push(newRecord);
        }            
        this.currentRecords.reset(newRecords);
    }
});

我有一个名为 dossier 的视图，它是 html

<div id="dossier1" class="dossier">
  <div id="dossier1-navContainer" class="navigatorContainer"/>   
  <div class="pagesNavigatorContainer"/>
  <div class="pagesContainer"/>
  <div class="readOnlyFiche"/>
</div>

当我第一次渲染达析报告（我只渲染一次）时，我在以下渲染函数中创建导航器

render: function () {
    this.$el.html(this.template({
        uniqBaseId: this.id,
        className: this.className
    }));
    var nav = this.navigator = new NavigatorView({
        model : this.model,
        id: this.id+'navigator',
        el: $('#'+this.id+'-navContainer')
    });
    this.navigator.render();
    //We notify the navigator that it's ready. This will allow the nav to load records
        nav.onDOMUpdated();
    }
}

正如我们所看到的，我将"#dossier1-navContainer"ID提供给导航器，以便他在那里渲染

所以，这是它的工作原理。当我呈现达析报告时，它会创建一个导航器并将其插入 DOM 中。完成后，我通知导航器它可以通过 ajax 请求从服务器加载其数据。当我收到答案时，我用传入的记录重置了数据收集。

在导航器渲染函数中的 this.$el.html（tplResult） 之前，我输出结果字符串。

第一次

<div class="items"></div> 

第二次拿到唱片的时候，是

<div class="items">
    <div>item1</div>
    <div>item2</div>
    <div>item3</div>
</div> 

所以模板生成是正确的。但是，当第二次渲染发生时，this.$el.html（tplResult） 不执行任何操作。如果我在浏览器中查看 DOM，则没有任何变化

但是，如果我将此行替换为

$('#dossier1-navigator').html(tplResult) 

它有效。这意味着第一次 $（'#dossier1-navigator'） 和 this.$el 是同一个对象，第二次不是。

我不知道为什么它第二次不适用于标准 this.$el。

帮助！！

提前致谢

编辑：在与Seebiscuit讨论了很多之后，我添加了有助于回答问题的几行

newTask.render();
var taskHtml = newTask.$el.html();
$('#mainTaskContainer').append(taskHtml);