可以調用initialize（）初始化視圖嗎？

Question

在我的骨幹應用程序，我有以下

playlistView = new PlaylistView({ model: Playlist }); 
    Playlist.getNewSongs(function() { 
    playlistView.initialize(); 
    }, genre, numSongs); 

Playlist.getNewSongs()當一些Ajax請求完成後叫回。然後我想重新初始化視圖。但是，我相信我這樣做的方式會導致這個視圖的problem兩次聽同一個事件。打電話initialize()這樣可以接受嗎？如果不是，我該怎麼做呢？

更新：

我在骨幹寫了這個chrome extension學習骨幹，這是在目前設計的地獄。我正在重構整個代碼庫。下面的代碼片段是我的PlaylistView initialize（）代碼塊。

var PlaylistView = Backbone.View.extend({ 
    el: '#expanded-container', 

    initialize: function() { 
     var playlistModel = this.model; 
     var bg = chrome.extension.getBackgroundPage(); 

     if (!bg.player) { 
     console.log("aborting playlistView initialize because player isn't ready"); 
     return; 
     } 

     this.listenTo(playlistModel.get('songs'), 'add', function (song) { 
     var songView = new SongView({ model: song }); 
     this.$('.playlist-songs').prepend(songView.render().el); 
     }); 

     this.$('#song-search-form-group').empty(); 
     // Empty the current playlist and populate with newly loaded songs 
     this.$('.playlist-songs').empty(); 
     var songs = playlistModel.get('songs').models; 

     // Add a search form 
     var userLocale = chrome.i18n.getMessage("@@ui_locale"); 
     var inputEl = '<input class="form-control flat" id="song-search-form" type="search" placeholder="John Lennon Imagine">' + 
      '<a href="javascript:void(0)" id="open-favorites"><span class="search-heart-icon fa fa-heart"></span></a>'+ 
      '<span class="search-input-icon fui-search"></span>'; 
     } 
     this.$('#song-search-form-group').append(inputEl); 
     var form = this.$('input'); 
     $(form).keypress(function (e) { 
     if (e.charCode == 13) { 
      var query = form.val(); 
      playlistModel.lookUpAndAddSingleSong(query); 
     } 
     }); 

     // Fetch song models from bg.Songs's localStorage 
     // Pass in reset option to prevent fetch() from calling "add" event 
     // for every Song stored in localStorage 
     if (playlistModel.get('musicChart').source == "myself") { 
     playlistModel.get('songs').fetch({ reset: true }); 
     songs = playlistModel.get('songs').models; 
     } 

     // Create and render a song view for each song model in the collection 
     _.each(songs, function (song) { 
     var songView = new SongView({ model: song }); 
     this.$('.playlist-songs').append(songView.render().el); 
     }, this); 

     // Highlight the currently played song 
     var currentSong = playlistModel.get('currentSong'); 
     if (currentSong) 
     var currentVideoId = currentSong.get('videoId'); 
     else { 
     var firstSong = playlistModel.get('songs').at(0); 
     if (!firstSong) { 
      // FIXME: this should be done via triggering event and by Popup model 
      $('.music-info').text(chrome.i18n.getMessage("try_different_chart")); 
      $('.music-info').fadeOut(2000); 
      //console.log("something wrong with the chart"); 
      return; 
     } 
     var currentVideoId = firstSong.get('videoId'); 
     } 

     _.find($('.list-group-item'), function (item) { 
     if (item.id == currentVideoId) 
      return $(item).addClass('active'); 
     }); 

    }, 

Answer 1

這沒有錯，但可能不是一個好的做法。您沒有在您的initialize中發佈代碼，但可能您的邏輯太多。

如果你只是重新初始化視圖，以便新的數據呈現，你應該使用事件偵聽器這樣：

myView = Backbone. View.extend ({ 
    initialize : function() { 
     // We bind the render method to the change event of the model. 
     //When the data of the model of the view changes, the method will be called. 
     this.model.bind("change" , this.render, this); 

     // Other init code that you only need once goes here ... 
     this.template = _.template (templateLoader. get('config')); 
    }, 

    // In the render method we update the view to represent the current model 
    render : function(eventName) {  
     $ (this.el).html(this .template ((this.model .toJSON())));  
     return this;   
    } 

}); 

如果您initiialize邏輯的東西完全一樣，請包括它。也許有一個適合它的地方。