Backbone.js子視圖模板不渲染雖然渲染函數運行

Question

不幸的是，我已經爲我的項目編寫了一個子視圖。雖然它之前已經完美呈現，並且完全如我所願，但我瞭解到我的應用程序構造不正確。我正在進行重組，其他一切都像魅力一樣，但通過我的新設置，它似乎無法在其el中呈現。 el呈現完美，但沒有插入任何內容。我把一個console.log()放在那裏打印出應該渲染的template，它是完美無瑕的。但是，that.$.el.html()行完全不呈現模板。我不確定發生了什麼事。該文件在下面。我的不好意思是在殺我！

contactlist.js（查看）：

define([ 
    'jquery', 
    'underscore', 
    'backbone', 
    'text!templates/contactlist.html', 
    'collections/contacts' 
], function($, _, Backbone, contactListTemplate, Contacts){ 

    var ContactListView = Backbone.View.extend({ 
    initialize: function() { 
     var that = this; 
     this.options = { 
      idclicked: null, 
      query: null, 
      scrolled: 0 
     }; 
     this.options.get = function (property) { 
      return that.options[property]; 
     }; 
     this.options.set = function (properties) { 
      for (property in properties) { 
       that.options[property] = properties[property]; 
      } 
     }; 
    }, 
    el: '.contact-list', 
    render: function() { 
     var that = this; 
     var contacts = new Contacts(); 
     contacts.fetch({ 
      success: function(contacts) { 
       var results = contacts.models; 
       if (that.options.query || that.options.query === '') { 
        var query = that.options.query.toUpperCase(); 
        var results = contacts.toArray(); 
         results = contacts.filter(function(contact){ 
          return _.any(['firstname', 'lastname', 'email', 'phonenumber'], function(attr){ 
           return contact.get(attr).toString().toUpperCase().indexOf(query) !== -1; 
          }); 
         }); 
         that.options.set({idclicked: null}); 
       } 
       if (!that.options.idclicked && results[0]) { 
        that.options.idclicked = results[0].get('id'); 
        Backbone.history.navigate('/contacts/' + results[0].get('id'), {trigger: true}); 
       } 
       var template = _.template(contactListTemplate, {contacts: results, idclicked: that.options.idclicked}); 
       that.$el.html(template); 
       $(document).ready(function() { 
        $('.contact-list').scrollTop(that.options.scrolled); 
       }); 
      } 
     }); 
    }, 
    events: { 
     'click .contact': 'clickContact' 
    }, 
    clickContact: function (ev) { 
     $('.contact-clicked').removeClass('contact-clicked').addClass('contact'); 
     $(ev.currentTarget).addClass('contact-clicked').removeClass('contact'); 
     window.location.replace($(ev.currentTarget).children('a').attr('href')); 
    } 
    }); 

    return ContactListView; 

}); 

UPDATE：

嘗試一兩件事的工作，但不知道它是否是一個很好的做法與否。下面的代碼是父視圖：

allcontacts.js（查看）：

define([ 
    'jquery', 
    'underscore', 
    'backbone', 
    'text!templates/allcontacts.html', 
    'views/contactlist', 
    'collections/contacts' 
], function($, _, Backbone, allContactsTemplate, ContactListView, Contacts) { 
    var AllContactsView = Backbone.View.extend({ 
    initialize: function() { 
     var that = this; 
     this.options = { 
      idclicked: null, 
      pageloaded: false, 
      renderlist: true, 
      scrolled: null 
     }; 
     this.options.get = function (property) { 
      return that.options[property]; 
     }; 
     this.options.set = function (properties) { 
      for (property in properties) { 
       that.options[property] = properties[property]; 
      } 
     }; 

     that.contactListView = new ContactListView(); 
    }, 
     el: '.allcontacts', 
     render: function() { 
      var that = this; 
      if (!that.options.pageloaded) { 
       var template = _.template(allContactsTemplate, {}); 
       that.$el.html(template) 
     } 
     if (that.options.renderlist) { 
       this.contactListView.options.set({idclicked: that.options.idclicked, scrolled: that.options.scrolled}); 
       this.contactListView.setElement('.contact-list').render(); 
      } 
     }, 
     events: { 
     'keyup .search': 'search', 
     'submit .search-contacts-form': 'cancelSubmit' 
     }, 
     search: function (ev) { 
      this.contactListView.options.set({idclicked: this.options.idclicked, query: $(ev.currentTarget).val(), scrolled: this.options.scrolled}); 
      this.contactListView.setElement('.contact-list').render(); 
     }, 
     cancelSubmit: function (ev) { 
      return false; 
     } 
    }); 

    return AllContactsView; 

}); 

Answer 1

檢查您EL元素可用，當你將它綁定。似乎它還沒有呈現。