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
Post a Comment