backbone.js - 如何处理骨干中的隐藏和显示

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

但现在我想要的是列表应该是不可见的，并且只有在单击链接时，列表才会显示为菜单。单击其他位置或将光标移至其他位置时，菜单必须隐藏。

这可能吗。我是骨干新手，所以不知道该怎么做。

Answer 1

对的，这是可能的。您可以使用常用javascript&jQuery功能：.show()&.hide()或.addClass()& removeClass()with 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 可以是 '.row-fluid'