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()＆amp; .hide()或.addClass()＆amp; 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可以是'.row-fluid'

如何处理骨干中的隐藏和显示

1 个答案: