jquery - 如何将 jquery-ui 应用到 Backbone.js View ？

Question

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

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

此方法有效，但我想知道是否可以使用更简单的选择器而不是 $(this.el.selector)？起初我以为我可以只执行 el.button(); 但这不起作用。

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

Answer 1

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

您需要记住 View jquery 选择器何时执行。

当你像你一样输入它时，你的 jQuery 选择器会在解析 View 代码时执行，这意味着，这主要发生在你的 dom 尚未准备好加载时。

你最好通过el稍后像这样:

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

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

现在，您的 View 在文档准备就绪时实例化，按钮元素被传递，因为 dom 已准备好并且您的选择器解析为按钮元素。您可以愉快地使用el.button();在上面应用一些东西。

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

编辑

另一种方法是将元素选择器定义为 el 参数，并且只像您那样执行它。

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

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

这也可以，但是你只能在给定的按钮上使用这个 View ，除非你重写它，第一个例子对于重用代码来说更干净，你可以实例化它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();
});