如何根據其他視圖中的更改刪除視圖？ Backbone

Question

我想基於另一個視圖中的更改來移除視圖，以便在發生更改時呈現新視圖。我目前有一個容器視圖，該視圖呈現一個名爲search的視圖，一旦搜索按鈕被點擊，我想刪除視圖並添加另一個視圖。渲染髮生在容器視圖中（使用模型渲染視圖，並添加模板）。然而，我不知道如何通過或允許容器視圖來偵聽搜索視圖中的變化......我建立一個容器視圖的原因是因爲我試圖不改變路線，參數可以從/ search中改變到/頁面並顯示結果，但我不知道如何去做這件事，即使容器視圖已被刪除，並且路由器正在控制此操作，我如何允許路由器聽到更改？

我喜歡聽任何方向使用路由器或使用容器視圖，只需要知道如何聽更改事件。

下面是路由器的代碼：

define([ 
    'jquery', 
    'underscore', 
    'backbone', 
    //'views/page', 
    //'views/search', 
    'views/container' 

], function($, _, Backbone, Container) { //Page, Search 
    var AppRouter = Backbone.Router.extend ({ 
     routes: { 
      'page/:id': 'showPage', 
      's': 'showView' ///:page 
     } 
    }); 

    var initialize = function() { 
     var app_router 
     app_router = new AppRouter; 
     // Extend the View class to include a navigation method goTo 
     Backbone.View.prototype.goTo = function (loc) { 
      app_router.navigate(loc, true); 
     }; 

     console.log('router file hit'); 
     app_router.on('route:showPage', function (id) { 

      var page = new Page(); 
      page.render(id); 
     }); 

     app_router.on('route:showView', function() { 
      console.log('search file hit'); 
      var container = new Container(); 
      container.render(); 

     }); 

     Backbone.history.start(); 

    }; 

    return { 
     initialize: initialize 
    }; 
}); 

下面是容器視圖的代碼：

define([ 
    'jquery', 
    'underscore', 
    'backbone', 
    'models/search', 
    'views/search', 
    'text!templates/search.html', 
    'views/page', 
    'text!templates/page.html' 
    //'collections/songs', 
    //'views/song', 


], function($, _, Backbone, SearchM, SearchV, SearchT, PageV, PageT){ //Song, Songs, SongV, 

    var Container = Backbone.View.extend({ 
    el: $("#Sirius"), 

    initialize: function() { 

    }, 

    render: function() { 
     console.log('container rendered') 
     //create new instance of the model 
     var searchM = new SearchM(); 
     var search = new SearchV({model: searchM}); // 
     this.$el.html(SearchT); 
     search.render(); 
     //search.listenTo(this.model, 'change:display', this.displayChanged);   
    } 

     }); 
    return Container; 
}); 

下面是搜索視圖的代碼：

define([ 
    'jquery', 
    'underscore', 
    'backbone', 
    'models/search', 
    'text!templates/search.html', 

], function($, _, Backbone, SearchM, SearchT){ 

    var Search = Backbone.View.extend({ 
    //model: SearchM, 
    el: $("#Sirius"), 

    events: { 
     'submit #searchMusic': 'search' 
    }, 
    initialize: function() { 
     this.listenTo(this.model, 'change:display', this.displayChanged); 
    }, 
    displayChanged: function() { 
     console.log('display changed'); 
    }, 
    search: function (e) { 
     e.preventDefault(); 
     var that = this; 
     //post instance to the server with the following input fields 
     that.model.save({ 
     channel: $('#channel').val(), 
     week: $('#week').val(), 
     year: $('#year').val(), 
     filter: $('#filter').val() 
     },{success: that.storeMusic(that) }); 

     // on success store music on client-side localStorage 
    }, 
    storeMusic: function (that, response, options) { 
     console.log('store'); 
     //create new instance of the localStorage with the key name 
     that.model.localStorage = new Backbone.LocalStorage("music"); 
     var that = this; 
     that.clearLocalStorage(that); 

     that.saveToLocalStorage(response, that); 
     }, 
     clearLocalStorage: function (that) { 
     console.log('clear'); 

      //removes the items of the localStorage 
      that.model.localStorage._clear(); 

      //pops out the first key in the records 
      that.model.localStorage.records.shift(); 

     }, 
     saveToLocalStorage: function (response, that) { 
      console.log('save'); 
      console.log(that); 
      that.model.save({music: response}, {success: that.nextPage(that)}); 
     }, 


     nextPage: function (that) { 
      console.log('entered next page'); 
      that.model.set('display', true); 

     } 

    }); 
    return Search; 
}); 

Answer 1

我使用一種中介模式能夠在我的應用程序的不同部分之間進行通信，但是避免將它們耦合到緊緊地。

var myApp = {}; // namespace for views, models, utilities etc. 
_.extend(myApp, Backbone.Events); 

在Container和Search之間進行通信。下面的相關部分：

var Container = Backbone.View.extend({ 
    initialize: function() { 
    this.listenTo(myApp, 'changeOccured', function(){ /* do something */ }); 
    } 
}); 


var Search = Backbone.View.extend({ 
    displayChanged: function() { 
    myApp.trigger('changeOccured'); 
    } 
}); 

這種方法的好處是，你可以listenTo/trigger的changeOccured事件在其他視圖/模型/收藏，而不在未來Search查看代碼搞亂。