jquery - 无法添加 jquery ui 工具提示以在backbone.js 中查看

Question

全部，

我是 Backbone.js 的新手，我正在努力从 Backbone.js View 中向 HTML 元素添加 jQuery UI 工具提示行为，我想知道您是否可以提供帮助。

在我的 render() 函数中，我有一些代码尝试添加如下所示的工具提示:

render: function() 
{
  …other code here…

this.$el.find(".test").tooltip(
{
  content: "<h1>dude!</h1>"
});
return this;
},

但是，工具提示内容未与 HTML 元素正确关联...导致没有工具提示弹出窗口。没有控制台错误，但没有弹出窗口。另一方面，像下面这样不使用 jQuery UI 插件的简单事情也可以正常工作:

this.$el.find(".test").css("background", "red");

我很确定我正确添加了工具提示；我有一个工作的 jsFiddle ，我在这里尝试做的事情(没有 Backbone.js): http://jsfiddle.net/Mkk4w/ 。如果将鼠标悬停在其中一张图像上，您将弹出一个工具提示。

StackOverflow 和 Google 上的其他文章表明 Backbone (this.$el) 构造的“内存中 DOM”不够完整，无法在 render() 中使用> 函数，这导致 jQuery UI 工具提示函数无法正确绑定(bind)。他们说这段代码不应该位于 render() 函数中，而应该位于 Backbone 应用程序的其他位置。我已经尝试了这些其他方法的许多变体，但我没有任何运气。我很确定这是某种不完整/错误的上下文问题，但我无法弄清楚。

如果您对如何使其发挥作用有任何想法，我当然会感激不已。

Answer 1

这里是a working jsfiddle显示呈现 jQuery UI 工具提示的 Backbone.View。这是 JavaScript:

var View = Backbone.View.extend({
    template: _.template($('#a-tpl').html()),
    render: function () {
        this.$el.append(this.template());  
        this.$el.find('.test').tooltip({
            content: "<h1>Dude!</h1>"
        })
        return this; 
    }
});

var view = new View({});
$('body').append(view.render().el);

以及对应的html模板

<script type="text/tpl" id="a-tpl">
    <a class="test" title="" href="#">
        <img src="http://placehold.it/100x100" />
    </a>
</script>