Backbone.Js 应用程序重新加载，调用渲染两次答案

【问题标题】：Backbone.Js app reloading, calling render twiceBackbone.Js 应用程序重新加载，调用渲染两次
【发布时间】：2014-06-28 05:48:42
【问题描述】：

我已经扩展了 todomvc 的 Backbone 版本，并且发现视图变化无常。很难消除听众和事件的歧义。看不到为什么这会调用app.AppView.render() 渲染两次，并且在第二次调用时，本地存储中的项目被丢弃。有人对本地骨干存储有疑问吗？

搜索输入存储第一个项目，然后重新加载某些内容并且集合为空。

HTML 视图：

app.AppView = Backbone.View.extend({
    el: '#searchapp',
    events: {
        'keypress #new-search': 'createOnEnter',
        'click #clear-unstarred': 'clearUnStarred',
    },
    initialize: function () {
        this.$input = this.$('#new-search');
        this.$list = $('#search-list');
        this.$results = this.$('#search-grids');
        this.$stats = this.$('#search-stats');

        this.listenTo(app.searches, 'add', this.addOne);
        this.listenTo(app.searches, 'reset', this.addAll);
        this.listenTo(app.searches, 'change:starred', this.filterOne);
        this.listenTo(app.searches, 'filter', this.filterAll);
        this.listenTo(app.searches, 'all', this.render);

        app.searches.fetch(); //{reset: true}
    },

    render: function () {
        //app.SearchFilter = app.SearchFilter || 'starred';
        var starred = app.searches.starred().length;
        var remaining = app.searches.remaining().length;
        if (app.searches.length) {

            var h = $('#stats-template').html(), t = _.template(h),
                d = {
                    count: (starred + remaining),
                    starred: starred,
                    remaining: remaining
                }, s = t(d);

            this.$stats.html(s);
            this.$('#filters a').removeClass('selected').filter('[href="#/' + (app.SearchFilter || '') + '"]').addClass('selected');
            app.searches.last().trigger('runsearch');

        } else {
            //this.$results.hide();
            //this.$stats.hide();
        }

    }, ...............

项目视图：

app.SearchView = Backbone.View.extend({
    tagName:  'div',

    events: {
        'click .do-search': 'runSearch',
        'click .do-destroy': 'clear',
        'click .do-toggle-star': 'togglestar',
        'dblclick label': 'edit',
        'keypress input.title': 'updateOnEnter',
        'keydown input.title': 'revertOnEscape',
        'blur input.title': 'close'
    },

    initialize: function () {
        this.$results = $('#search-grids');
        this.listenTo(this.model, 'change', this.render);
        this.listenTo(this.model, 'destroy', this.remove);
        this.listenTo(this.model, 'visible', this.toggleVisible);
        this.listenTo(this.model, 'runsearch', this.runSearch);
    },

    render: function () {
        if (this.model.changed.id !== undefined) {
            return;
        }
        var h = $('#search-item-template').html(), t = _.template(h),
            d = this.model.toJSON(), s = t(d);
        this.$el.html(s);
        this.$el.toggleClass('starred', this.model.get('starred'));
        this.$input = this.$('input.title');
        this.toggleVisible();
        return this;
    },

【问题讨论】：

找到了一个相关的帖子。 Backbone.Localstorage 在保存时分配一个 id，触发更改事件。仍然为什么我重新加载并且本地存储是空的。 *** stackoverflow.com/questions/10228267/… *** github.com/tastejs/todomvc/issues/469

标签： javascript backbone.js

【解决方案1】：

Chrome 开发者工具在问题期间未显示“存储”。清理确实有帮助。没有做出重大改变。基本上确保在这里做集合 add() 和模型 save() --

http://www.mostlystatic.com/2013/01/26/minimal-backbone-localstorage-example.html

【讨论】：