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

コンテナと検索の間で通信するため。以下の関連部分:

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 に答える