2

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

しかし、今私が望んでいたのは、リストを非表示にして、リンクをクリックしたときにのみリストがメニューとして表示されるようにすることです。他の場所をクリックした場合、またはカーソルが他の場所に移動した場合は、メニューを非表示にする必要があります。

これは可能ですか？私はバックボーンの初心者なので、これを行う方法がわかりません。

4

1 に答える 1

3

はい、可能です。一般的な関数を使用できます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」にすることができます

于 2013-08-26T11:05:56.440 に答える