0

嘿,我尝试删除所有内容的尝试是在使用 this.close() 触发上一个或下一个函数后调用搜索视图文件中的关闭函数,但它正在删除完全影响导航功能的视图......我想知道如何去做完成后删除所有内容,否则在路由器中会多次出现vent.on。

这是我的路由器文件:

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 currentView, page, search;
    Backbone.View.prototype.close = function () {
        this.remove();
        this.unbind();
        if (this.onClose) { 
            this.onClose();
        }
    };

    var AppRouter = Backbone.Router.extend ({
        routes: {
            'page/:id': 'showPage',
            'search': 'showView' 
        }
    });

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

        vent.on('loadPage', function (id) {
            console.log('hit loaded page');
            var newPage = 'page/' + id;
            if(id < songPages && id >= 0 ) {
                app_router.navigate(newPage, true);
            } else {
                app_router.navigate('search', true);
            }

        })
        console.log('router file hit');
        app_router.on('route:showPage', function (id) {
            console.log('page rendered');
            var songs, collected, songM, start;
            songM = new SongM();
            songM.localStorage = new Backbone.LocalStorage("music");
            songM.localStorage.findAll().forEach(function (i) {
                collected = i;
            });
            songPages = Math.ceil(collected.music.length / 25); //10 pages
            start = id * 25;
            songs = collected.music.splice(start, 25); 
            var titles = {
                week: collected.week,
                year: collected.year,
                channel: collected. channel
            };
            var currentId = parseInt(id);
            if (page) {console.log('page is current'); console.log(page); page.remove(); }
            page = new PageV({model: songM, collection: songs, vent: vent, titles: titles, theId: currentId });

            page.render(id);
            //$("#Sirius").html(page.el);


        });

        app_router.on('route:showView', function () {
            console.log('search page loading...');
            var cur;
            var searchM = new SearchM();
            //if (search) {console.log(search); search.remove(); }
            search = new SearchV({model: searchM, vent: vent}); 
            //if(cur) {cur.stopListening(); cur.remove(); console.log('cur removed'); }

            search.render();
            //cur = search;
            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('loadPage', this.options.theId - 1);
    },
    next: function () {
       this.options.vent.trigger('loadPage', this.options.theId + 1);
    },
    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;
});
4

1 回答 1

1

#Sirius发生这种情况是因为您每次创建视图时都重复使用相同的 DOM 元素。在初始化时,Backbone 视图将 DOM 事件委托给它们的顶级节点,并用$el.

删除视图时,清理是自动的,因为节点已从 DOM 中删除。当您替换节点的 HTML 而不删除它时,事件处理程序永远不会被删除,即使它们的内容不再在 DOM 中,您的旧视图也不会响应单击事件。

有几种方法可以处理这个问题。

  1. 渲染可替换内容时,不要直接渲染到 DOM 元素中。相反,将其视为一个容器并在其中渲染。这样您就可以在不影响原始 DOM 的情况下移除视图。这是具有可交换视图的页面区域的常用方法。

    // somewhere in a higher scope, refer to the page.  Note that if you
    // don't need to do any cleanup (Events bindings, model cleanup, etc), you
    // don't *need* to keep this reference.
    var page;
    
    // in your show handler, replace the *contents* of the DOM element rather 
    // than creating a 2nd view attached to it.  This means removing the `el`
    // from the view prototype, as well.
    if (page) page.remove();
    page = new Page(...);
    page.render();
    $("#Sirius").html(page.el);
    
  2. 重用同一个视图,更新它的实例变量而不是替换它。这对于分页特别有意义,您正在迭代内容集合但结构保持不变。

    // somewhere in a higher scope (or on app.page, etc)
    var page;
    
    // on the view, clean up the process of "updating" settings with a method,
    // something like:
    update: function (options) {
      this.model = options.model;
      this.collection = options.collection;
      this.options = options;
    }
    
    // then in your show handler, create a new view the first time, then just
    // update it rather than replacing it
    page || (page = new PageV());
    page.update(options);
    
  3. 从 DOM 元素中清除委托的事件绑定。我犹豫要不要添加它,因为 1 和 2 都更合适,但是这些方法中的任何一种都可能有效:

    // kludge level 1: reference the searchview and attempt to clean it
    if (page) {
      page.undelegateEvents();
      page.stopListening(); // if available
      // any other cleanup
    }
    page = new PageV(...);
    
    // kludge level 2: unbind all DOM events from the element
    $("#Sirius").off();
    var page = new PageV(...);
    
    // kludge level 3: replace the element in the DOM
    $("#Sirius").replaceWith('<div id="#Sirius" />');
    var page = new PageV(...);
    

不要做#3。1或2更合适。

于 2013-10-28T21:10:43.537 回答