骨干视图事件绑定较晚答案

【问题标题】：Backbone view events binding late骨干视图事件绑定较晚
【发布时间】：2012-07-24 11:15:46
【问题描述】：

我在视图初始化时触发事件时遇到问题。如果我使用 setTimeout 调用事件，则会触发该事件。但是，该事件不会在视图初始化时触发。

/*global app */

define([
    'handlebars',
    'text!templates/achievements.html'
], function (Handlebars, AchievementsTemplate) {
"use strict";
var AchievementsView = Backbone.View.extend({

    achievementsTemplate: Handlebars.compile(AchievementsTemplate),

    initialize: function () {
        var el = this.render(this.model);
        this.$weekFilter = $(el).find(".challenge-nav li.open a");
        this.model.bind('change', this.resetFilters, this);
        this.resetFilters();
    },
    render: function (model) {
        this.$el.html(this.achievementsTemplate(model.toJSON()));
        return this.$el;
    },
    events: {
        "click .challenge-nav li a": "filterAchievements"
    },
    resetFilters: function () {
        this.$weekFilter.first().trigger("click");
    },
    filterAchievements: function (ev) {
        console.log("test");
    }
});
return AchievementsView;
});

上面没有调用resetFilters函数，但是如果我做了一个setTimeout，就会调用该函数。唯一的猜测是事件绑定得很晚？有什么想法吗？

Hi All,

/*global app */

define([
    'handlebars',
    'text!templates/achievements.html'
], function (Handlebars, AchievementsTemplate) {
"use strict";
var AchievementsView = Backbone.View.extend({

    achievementsTemplate: Handlebars.compile(AchievementsTemplate),

    initialize: function () {
        var el = this.render(this.model);
        this.$weekFilter = $(el).find(".challenge-nav li.open a");
        this.model.bind('change', this.resetFilters, this);
        this.resetFilters();
    },
    render: function (model) {
        this.$el.html(this.achievementsTemplate(model.toJSON()));
        return this.$el;
    },
    events: {
        "click .challenge-nav li a": "filterAchievements"
    },
    resetFilters: function () {
        var self = this;
        setTimeout(function () {
            self.$weekFilter.first().trigger("click");
        },100);
    },
    filterAchievements: function (ev) {
        console.log("test");
    }
});
return AchievementsView;
});

【问题讨论】：

您确定resetFilters 没有被调用吗？尝试在其中添加console.log。我猜问题是this.$weekFilter DOM 元素在调用方法的那一刻没有完全填充。
是的 this.resetFilters() 肯定被调用了。 Console.logged它。问题是当我触发点击事件时，没有调用 filterAchievements。甚至 console.logged(this.$weekFilter) 看看它是否被加载到 DOM 中，它确实是。
我仍然认为问题是在调用self.$weekFilter.first().trigger("click"); 时没有加载this.$weekFilter。 Whatever console.log sais，在 self.$weekFilter.first().trigger("click"); 之前尝试 console.log( self.$weekFilter.first() )。
一定会的。今晚将继续工作并恢复。

标签： javascript events backbone.js

【解决方案1】：

如果$weekFilter DOM 元素不是Achievements 模板的一部分，那么当你initialize 小部件时它在DOM 中，那么问题是所有事件都是在初始化之后委托的。请参阅主干的来源：http://backbonejs.org/docs/backbone.html#section-145。

为什么不将this.resetFilters() 移至render()？

【讨论】：