如何根据另一个视图中的更改删除视图?骨干

Question

我正在尝试根据另一个视图中的更改删除视图，以便在发生更改时呈现新视图。我目前有一个容器视图，它呈现一个名为搜索的视图，单击搜索按钮后，我想删除该视图并添加另一个视图。渲染在容器视图中进行（使用模型呈现视图并添加模板）。但是，我不知道如何传递或允许容器视图侦听搜索视图中的更改......我构建容器视图的原因是因为我试图不更改路由，参数可以从/search 更改为/page 并显示结果，但我不确定如何做到这一点，即使容器视图被删除并且路由器正在控制它，我如何允许路由器听到更改？

我可以使用路由器或使用容器视图侦听任一方向，只需要知道如何侦听更改事件。

这是路由器的代码：

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 );

在容器和搜索之间进行通信。相关部分如下：

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 View 代码。