0

私の問題に言及しているものは見つかりませんでした。バックボーンでルーター ファイルを使用して、次のボタンと前のボタンを使用して、現在のページ ID に基づいて別のページに移動しています。ただし、次または前を1回クリックすると正常に動作しますが、2回目にボタンをクリックすると、機能が1回ではなく2回呼び出され、もう一度クリックすると2回以上呼び出されるようです凶暴になりそうなポイント。

これが私のルーターファイルです:

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


], function($, _, Backbone, PageV, SearchM, SearchV, SearchT, SongM, SongT) { 
    var vent = _.extend({}, Backbone.Events);
    var AppRouter = Backbone.Router.extend ({
        routes: {
            'page/:id': 'showPage',
            'search': 'showView' ///:page
        }
    });

    var initialize = function () {
        var app_router
        app_router = new AppRouter;


        console.log('router file hit');

        app_router.on('route:showPage', function (id) {
            console.log('page rendered');
            var songies, collected, songM;
            songM = new SongM();
            songM.localStorage = new Backbone.LocalStorage("music");
            songM.localStorage.findAll().forEach(function (i) {
                collected = i;
            });
            var songPages = Math.ceil(collected.music.length / 25); //10 pages
            var start = id * 25;
            var songies = collected.music.splice(start, 25); 
            var titles = {
                week: collected.week,
                year: collected.year,
                channel: collected. channel
            };
            var page = new PageV({model: songM, collection: songies, vent: vent, titles: titles});
            page.render(id);
            vent.on('next', advance);
            vent.on('previous', moveBack);
            var currentId = parseInt(id);
   //PROBLEM OCCURS TO THE BOTTOM TWO FUNCTIONS, and they are triggered by the vent.on above.

            function moveBack () {
                console.log('here is the current ID');
                var newPage = 'page/' + (currentId - 1);

                if(currentId <= songPages && currentId > 0 ) {
                    app_router.navigate(newPage, true);
                } else {
                    app_router.navigate('search', true);
                }
            }
            function advance () {
                console.log('here is the current ID');
                var newPage = 'page/' + (currentId + 1);
                console.log(currentId);
                console.log(songPages);
                console.log(newPage);
                if(currentId < songPages && currentId >=0 ) {
                    app_router.navigate(newPage, true);
                } else {
                    app_router.navigate('search', true);

                }

            }

        });

        app_router.on('route:showView', function () {
            console.log('search page loaded');
            var searchM = new SearchM();
            var search = new SearchV({model: searchM, vent: vent}); //
            search.render();
            vent.on('nextPage', printCons);
            function printCons () {
                console.log('changing pages');
                app_router.navigate('page/0', true);
            }; 


        });

        Backbone.history.start();

    };

    return {
        initialize: initialize
    };
});

ページビューのあるページは次のとおりです。

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

], function($, _, Backbone, Song, Songs, SongV, PageT, SongT){ 

  var Page = Backbone.View.extend({

    el: $("#Sirius"),
    events: { 
      "click .prev": "previous",
      "click .next": "next"
    },
    previous: function () {
       this.options.vent.trigger('previous');
    },
    next: function () {
       this.options.vent.trigger('next');
    },
    render: function () {
      var headings = this.options.titles; 
      var info = {
        week: headings.week,
        channel: headings.channel,
        year: headings.year
      }
      var pagetemp = _.template( PageT, info);
      this.$el.html( pagetemp );
      var songColl = this.collection;
      var songV = new SongV({collection: songColl});
      songV.render();

    }


  });
    return Page;
});

私が考えることができる唯一の問題は、過去のインスタンスを何らかの形で記憶し、両方で関数を呼び出すことです...または、なぜ2回呼び出されるのかわかりません...そのIDでページを更新すると次に、前または次をクリックすると、2回インクリメントされません...したがって、メモリ内にあるか、それを回避する方法がわからないものでなければなりません...

4

2 に答える 2

1

問題は、ルートを変更するたびに新しいビューを作成しているのに、古いビューを削除していないことです。次のビューをクリックするたびに、ビューが 2 倍になっていることでしょう。

役立つかもしれない投稿は次のとおりです。

Backbone.js でのビュー オブジェクトとモデル オブジェクトの破棄

于 2013-10-28T19:25:32.717 に答える