backbone和twitter-bootstrap popover

Question

这是一个非常类似的问题Backbone not binding events to jQuery Popover - 但答案似乎不符合我的需要。

我想绑定（twitter引导）popover到我的一个视图，但不知道我应该怎么做？

events : {  
    "hover .info" : "showDetails",  
}, 
render : function(){   
    var content = this.template.tmpl(this.model.toJSON()); 
    $(this.el).html(content);  
    return this; 
}, 
showDetails : function() { 

    this.$(".info").popover({title: 'Hello', content: 'World'});  
    this.$(".info").popover('show');   
    console.log(this.model.get('description')); 
}, 

我的模板看起来像

<script type="text/template" id="item-template"> 
    <div class="well listitem" style="padding: 14px 19px;"> 
    <div class="row show-grid" title="Irregular three column layout"> 
     <div class="span6">${heading}</div> 
     <div class="span1">${price}</div> 
     <div class="span1"><button class="btn info">Details</button></div>   
    </div> 
    </div> 
</script> 

所以我试图展现在酥料饼的一些文字，当鼠标进入按钮，当鼠标离开消失 - 在

但是鼠标
1. 弹出窗口出现时未定义为标题
2. 在鼠标移出时它保持原位。

我觉得我没有很好的约束力，但如果有人能看到我的错误，那将会很棒。

Answer 1

问题是，jquery hover事件需要两个回调函数，一个用于mouseenter和一个mouseleave。在你的情况下，你只传递一个函数，它将调用mouseenter并打开你的popover。从jquery docs：

调用$（选择）.hover（handlerIn，handlerOut）是简写： $(selector).mouseenter(handlerIn).mouseleave(handlerOut);

因此改变你这样的代码将解决您的第二个问题：

events : {  
    "mouseenter .info" : "showDetails", 
    "mouseleave .info" : "hideDetails"  
}, 
render : function(){   
    var content = this.template.tmpl(this.model.toJSON()); 
    $(this.el).html(content);  
    return this; 
}, 
showDetails : function() { 

    this.$(".info").popover({title: 'Hello', content: 'World'});  
    this.$(".info").popover('show');   
    console.log(this.model.get('description')); 
}, 
hideDetails : function() { 
    this.$(".info").popover('hide'); 
},