1

下面是我的主干视图。

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

功能说明：

当导航到特定的 url 时会发生什么，该setParams()函数被调用以从服务器获取模型。当调用 render 方法时，它会检查我们当前是否正在获取模型，如果是，则使用设置延迟回调来在完成获取时渲染模板。当模型被获取并且我们准备好渲染时，渲染模板并填充视图that.$el.html()。

问题：

发生的情况是，当我第一次导航到一个 url 时，我的事件可以完美运行，但是当我点击后退按钮时，我的事件不会被附加。

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

任何线索是怎么回事？

4

2 回答 2

0

尝试改变：

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

到

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

有同样的问题，这解决了它。

于 2012-08-20T21:27:37.877 回答
0

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

我正在使用Marionette，我的视图包含在一个区域中。在 Region 的开放功能中，它正在执行this.$el.html(view.el);在某些情况下清除事件的操作。我仍然不确定为什么它在某些情况下会发生，但在其他情况下会发生。

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

我最终通过单步执行代码并观察在视图的 div 上注册的事件找到了答案。

于 2012-08-21T12:31:14.017 回答