Question

我找不到任何提到我的问题的东西，我正在使用骨干网中的路由器文件通过使用下一个和上一个按钮导航到基于当前页面ID的不同页面。但是，当我单击下一个或上一个，它工作正常，但第二次单击按钮时，功能区被调用两次而不是一次，然后如果我再次点击它，它似乎被调用甚至超过两次这似乎是疯狂的一点。

这是我的路由器文件：

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

我能想到的唯一问题是，它以某种方式记住过去的实例并在它们上面调用函数......或者我不知道为什么它会被调用两次...因为如果我刷新页面那个id，然后单击上一个或下一个它不会增加两次...所以它必须在内存中或不确定如何绕过它......

Answer 1

问题在于app_router.on事件处理程序中的以下事件处理程序绑定：

vent.on('next', advance);
vent.on('previous', moveBack);

每次显示新路由时，都会再次将这些功能绑定到事件聚合器。您应该将这两个绑定移到initialize函数之外，这样就不会多次绑定它。

另一个快速修复，如果出于某种原因，将这些绑定移到外面会破坏功能，就是取消绑定先前的绑定，然后再次绑定事件处理程序：

vent.off('next');
vent.on('next', advance);
vent.off('previous');
vent.on('previous', moveBack);

有关详细信息，请参阅Backbone docs。

Answer 2

问题在于，每次更改路径时都会创建一个新视图，但是您永远不会删除旧视图。每次点击下一个视图时，你可能会将视图加倍！

以下是可能有用的帖子：

Disposing of view and model objects in Backbone.js

骨干增量问题

2 个答案: