主干网的增量问题

increment issue with backbone

本文关键字:问题 主干网      更新时间:2023-09-26

>我找不到任何提到我的问题的内容,我正在使用我的路由器文件在主干中使用我的路由器文件,通过使用下一个和上一个按钮,根据当前页面ID导航到不同的页面。但是,当我单击下一个或上一次时,它工作正常,但是第二次单击按钮时,functin 被调用两次而不是一次,然后如果我再次单击它,它似乎被调用了两次以上,以至于它似乎变得疯狂。

这是我的路由器文件:

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 刷新页面,然后单击上一个或下一个,它不会增加两次......所以它一定在内存中或不确定如何绕过它的东西......

问题出在 app_router.on 事件处理程序中的以下事件处理程序绑定上:

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

每次显示新路由时,都会再次将这些函数绑定到事件聚合器。应将这两个绑定移到初始化函数之外,这样就不会多次绑定它。

如果由于某种原因将这些绑定移到外部会破坏功能,另一个快速解决方法是取消绑定以前的绑定,然后再次绑定事件处理程序:

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

有关此内容的更多详细信息,请参阅主干文档。

问题是每次更改路由时都会创建一个新视图,但从不删除旧视图。每次点击下一个时,您的视图可能会翻倍!

这里有一篇可能会有所帮助的帖子:

在主干中释放视图和模型对象.js