Как спрятать и показать в позвоночнике

Question

У меня есть следующий шаблон HTML.

<script type="text/template" id="friend-request-list"> 
<div class="row-fluid"> 
    <ul class="nav nav-stacked nav-pills"> 
     <@ friendRequestCollection.each(function(user) { @> 
      <li id="user-list-<@= user.get('username') @>"><a href="#"><@= user.get('firstName') @></a></li> 
     <@ }); @> 
    </ul> 
</div> 

Этот шаблон показан в следующем pendingFriendRequest DIV,

<ul class="nav pull-left"> 
        <li> 
         <div id="pendingFriendRequest" class="notired">${nbFriendRequest}</div><a href="#" class="notifriend"><i class="icon-eye-open icon-white"></i></a> 
        </li> 
       </ul> 

Позвоночник код следующим

app.View.FriendRequestListView = Backbone.View.extend({ 
template: _.template($('#friend-request-list').html()), 

tagName: 'div', 

initialize: function(){ 
    this.friendRequestCollection = new app.Collection.FriendRequestCollection(); 
    this.friendRequestCollection.bind("reset", this.render, this); 
    this.friendRequestCollection.fetch(); 

    var self = this; 
}, 

render: function() { 
    $(this.el).html(this.template({ 
     friendRequestCollection: this.friendRequestCollection})); 
    return $(this.el); 
} 

}); 

app.Collection.FriendRequestCollection = Backbone.Collection.extend({ 
    url : function(){ 
     return '/rest/friendRequests'; 
    } 
    }); 

Но теперь то, что я хотел, что в списке должен быть невидимым, и только при щелчке ссылки список отображается как меню. При нажатии какой-либо другой или перемещение курсора в другое место меню должно скрываться.

IS это возможно. Я новичок в позвоночнике, поэтому не знаю, как это сделать.

Answer 1

Да, это возможно. Вы можете использовать общие функции javascript&jQuery: .show() & .hide() или .addClass() & removeClass() с your_menu_div. Вы можете написать все события, которые вам нужны, например, что:

app.View.FriendRequestListView = Backbone.View.extend({ 
    initialize: function(options){ 
    // it works when you click another place 
    $('html').off() 
    $('html').on('click', $.proxy(function(){ 
     menuElem = @$el.find('.nav-stacked'); 
     if !menuElem.hasClass('hidden') 
     menuElem.addClass('hidden');})); 
    }, 

    events: { 
    'mouseleave .row-fluid': '_hideMenuContent', 
    'mouseenter .row-fluid': '_showMenuContent' 
    //other events 
    }, 

    _hideMenuContent: function() { 
    if (!@$el.find('.nav-stacked').hasClass('hidden')) 
    @leave = true; 
    setTimeout(function(){ 
     if(@leave) 
     @leave = false; 
     @$el.find('.nav-stacked').addClass('hidden');} 
    , 3000); 
    }, 

    _showMenuContent: function() { 
    if (!@$el.find('.nav-stacked').hasClass('hidden')) 
    @leave = false; 
    } 
}); 

Но вы должны думать о вашем приложении архитектуры, потому что your_menu_div должен быть внутри app.View.FriendRequestListView.el. Div может быть «.pub-fluid»