0

我正在尝试根据另一个视图中的更改删除视图，以便在发生更改时呈现新视图。我目前有一个容器视图，它呈现一个称为搜索的视图，一旦单击搜索按钮，我想删除该视图并添加另一个视图。渲染发生在容器视图中（使用模型渲染视图并添加模板）。但是，我不知道如何通过或允许容器视图侦听搜索视图中的更改...我构建容器视图的原因是因为我试图不更改路由，参数可以从 /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;
});
4

1 回答 1

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视图代码。

于 2013-10-25T11:45:48.473 回答