何时在Backbone视图中应用jQuery代码

时间:2012-04-19 09:14:04

标签: javascript jquery javascript-events backbone.js

我有以下主干观点:

core.views.Login = Backbone.View.extend(
{
    el: '#main-content-wrapper',

    events:
    {
        'focus #username': 'usernameFocus',
        'blur #username': 'usernameBlur'
    },

    initialize: function()
    {
        this.render();
    },

    render: function()
    {
        var html = unlocked.renderTemplate('login', 'core');
        this.$el.empty().html(html);

        $('#username').focus();

        return this;
    },

    usernameFocus: function(event)
    {
        console.log('focus');
        if($(event.target).val() == 'Username')
        {
            $(event.target).val('');
        }
    },

    usernameBlur: function(event)
    {
        if($(event.target).val() == '')
        {
            $(event.target).val('Username');
        }
    }
});

我遇到的问题是当我这样做时:$('#username')。focus(); :在渲染中是:usernameFocus:event尚未附加。我能想到的只有两种解决方案。

  1. 使用setTimeout - 虽然此选项在技术上可行,但我认为这不是一个真正的选择
  2. 在渲染中手动应用事件 - 这样做会完全绕过Backbone提供的事件系统,这看起来很奇怪。
  3. Backbone是否为我提供了在应用所有事件后运行jQuery代码的方法?

2 个答案:

答案 0 :(得分:1)

我实际上只是将代码移出了视图的渲染方法,并进入了实际生成视图的路由器方法,无论如何这似乎是一个更好的地方。

答案 1 :(得分:1)

在焦点设置代码之前将事件处理程序映射到事件的一种简单方法是调用Backbone本身提供的相同绑定代码。你应该可以打电话:

this.delegateEvents();
this.render();

在初始化中获得你想要的效果。