Question

以下是我的骨干观点。

define([
    'app',
    'backbone',
    'twig',
    'templates/report',
    'data/reportViewCollection',
    'data/reportViewModel'
], function (app, Backbone, Twig, template, Collection, Model) {

    var collection = new Collection();
    var fetching;

    return Backbone.View.extend({
        setParams: function (rlId, viewId, categoryId, depth) {
            // reset any possible pending previous repests.
            fetching = false;

            var model = collection.getModel(rlId, viewId, categoryId, depth);
            if (!model) {
                model = new Model({
                    rlId: rlId,
                    viewId: viewId,
                    categoryId: categoryId,
                    depth: depth
                });
                fetching = model.fetch({
                    success: function (model) {
                        collection.add(model);
                    },
                    error: function (model) {
                        alert('error getting report view');
                    }
                });
            }
            this.model = model;
        },
        render: function () {
            var that = this;
            var done = function() {
                app.vent.trigger('domchange:title', that.model.get('title'));
                that.$el.html(Twig.render(template, that.model.toJSON()));

                that.delegateEvents(that.events);
                fetching = false;
            };
            if (fetching) {
                app.loading(this);
                fetching.done(done);
            } else {
                done();
            }
            return this;
        },
        events: {
            'change select.view-select': 'viewSelect',
            'click #dothing': function (e) {e.preventDefault(); alert('hi');}
        },
        viewSelect: function(e) {
            var selectedView = $(e.target).val();
            var rlId = this.model.get('rlId');
            if (!rlId) rlId = 0;
            var url = 'report/' + rlId + '/' + selectedView;
            console.log(this, e, url);
            Backbone.history.navigate(url, {trigger: true});
        }
    });
});

功能说明：

当导航到特定网址时，会调用setParams()函数从服务器获取模型。调用render方法时，它会检查我们当前是否正在获取模型，如果是，则使用设置延迟回调来在获取模板时呈现模板。获取模型并准备渲染时，渲染模板并按that.$el.html()填充视图。

问题：

当我第一次导航到网址时，我的活动完美无缺，但当我点击后退按钮时，我的活动无法附加。

我已经介入了代码，看不出任何差异。唯一真正的区别是我立即从缓存的collection加载模型而不是执行ajax请求来获取它。

有什么线索发生了什么？

Answer 1

尝试改变：

that.$el.html(Twig.render(template, that.model.toJSON()));

到

that.$el.html("");
that.$el.append(Twig.render(template, that.model.toJSON()));

有同样的问题并且修复了它。

Answer 2

我解决了我的问题。 @mu的评论让我朝着正确的方向前进。

我正在使用Marionette，我的观点包含在某个地区。在Region的open函数中，它正在执行this.$el.html(view.el);，它会在某些情况下清除事件。我仍然不确定为什么它会在某些方面，但在其他方面呢。

解决方案证明是在我的视图中添加onShow函数，即调用this.delegateEvents()。现在一切都很顺利了！

我最终通过单步执行代码并观察视图div上注册的事件来解决这个问题。

使用后退按钮时，delegateEvents无法正常工作

2 个答案: