如何将 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/

旁注
在旁注中，我建议使用 render 方法，您可以在 init 中自由地执行此操作，但我相信 render 方法应该处理此问题。

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