backbone.js - How to deal with hide and show in backbone -


i have following html template.

<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> 

this template shown in following 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> 

the backbone code follows

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

but wanted list should invisible , when link clicked list displayed menu. on clicking somehwere else or if cursor moved somewhere else menu must hide.

is possible. newbie in backbone dont know how this.

yes, possible. can use common javascript&jquery functions: .show()&.hide() or .addclass()&removeclass() your_menu_div. can write events ,which need, that:

app.view.friendrequestlistview = backbone.view.extend( {   initialize: function(options){     // works when click 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;   } }); 

but need think app architecture, because your_menu_div had inside app.view.friendrequestlistview.el. div can '.row-fluid'


Comments

Popular posts from this blog

java - activate/deactivate sonar maven plugin by profile? -

python - TypeError: can only concatenate tuple (not "float") to tuple -

java - What is the difference between String. and String.this. ? -