title: How to remove view based on a change in another view? Backbone
body: <p>I am trying to remove a view based on a change in another view so I can render a new view when the change has occurred. I currently have a container view, which renders a view called search, once the search button is clicked on I want to remove the view and add another view. The rendering happens in a container view (renders the view, with the model and adds the template). However, I do not know how to pass or allow the container view to listen for changes in the search view... the reason I built a container view is because I am trying to not change the route, the parameters can change from /search to /page and show the results but I am not sure how to go about doing this, even if the container view is removed and the router is controlling this, how do I allow the router to hear for changes? </p>
  
  <p>I am up to listening either directions using the router or using a container view, just need to know how to listen for a change event. </p>
  
  <p>Here is the code for the router:</p>
  
  <pre><code>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
      };
  });
  </code></pre>
  
  <p>Here is the code for the container view:</p>
  
  <pre><code>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;
  });
  </code></pre>
  
  <p>Here is the code for the search view:</p>
  
  <pre><code>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;
  });
  </code></pre>