如何将jquery-ui应用于Backbone.js视图？

Question

我是Backbone.js的新手.我已经为页面上已存在的按钮创建了一个视图.我在初始化视图时将jquery-ui应用于按钮:

var ButtonView = Backbone.View.extend({
    el: $('#ButtonId'),
    initialize: function () {
        $(this.el.selector).button();
    }
});

这种方法有效,但我想知道是否有一个更简单的选择器我可以使用而不是$(this.el.selector)？起初我以为我能够做到,el.button();但这不起作用.

或者是否有更好/更简单的方法来处理整个过程？

Answer 1

我可以向你保证el.button();工作但......

执行视图jquery选择器时需要记住.

当你像你一样输入它时,你的jQuery选择器会在解析视图代码时执行,这意味着,这主要发生在你的dom没有准备好加载时.

你最好能el在以后像这样传递:

var ButtonView = Backbone.View.extend({
    initialize: function () {
        this.el.button();
    }
});

$(function(){
    var myButton = new ButtonView({ el: $('#ButtonId') });
});

现在,您的视图在文档就绪时被实例化,因为dom已准备好并且您的选择器解析为按钮元素,因此传递了按钮元素.并且你可以愉快地使用它 el.button();来应用它.

例如:http://jsfiddle.net/saelfaer/KEQQB/

编辑

另一种方法是将elementselector定义为el参数,并且只像你那样执行它.

var ButtonView = Backbone.View.extend({
    el: '#ButtonId'
    initialize: function () {
        $(this.el).button();
    }
});

$(function(){
    var myButton = new ButtonView({ });
});

这也可以,但你只能在给定的按钮上使用这个视图,除非你覆盖它,第一个例子是重用代码的清洁,你可以实例化它3次,你可以通过另一个按钮...

例如:http://jsfiddle.net/saelfaer/KEQQB/6/

阿里纳斯 在阿里纳斯我建议使用的渲染方法,你可以自由地做这在init,但我相信渲染方法是一个应该处理这个.

var ButtonView = Backbone.View.extend({

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

    render: function () {
        this.el.button();
        return this;
    }
});

$(function(){
    var myButton = new ButtonView({ el: $('#ButtonId') }).render();
});