Pretty general question here, let me know if you would like me to elaborate more. I have a list of elements, each rendered by a view. When an element is clicked, it is highlighted, and the view responsible for that element sends its model to a separate view which displays additional information related to that element.
I'm trying to implement functionality for a user to use the arrow keys to switch between elements, but I'm not sure how to do this.
Here is the code for my View:
var app = app || {};
app.EmployeeView = Backbone.View.extend({
tagName: 'li',
className: 'list-group-item',
template: _.template('<%= Name %>'),
render: function() {
var html = this.template(this.model.attributes);
this.$el.html(html);
},
events: {
"mouseover" : function() {
this.$el.addClass('highlighted');
},
"mouseout" : function() {
this.$el.removeClass('highlighted');
},
"click" : function() {
$('.selected').removeClass('selected');
this.$el.addClass('selected');
$(document).trigger('select', [this.model]);
},
},
});
Does anyone have any suggestions on how I can implement using arrow keys to trigger the appropriate view to forward its model?
I had a very similar feature to implement for my product. I have a list of images. The user clicks on one thumbnail and visualize the image full size. There, I also have a detail box showing info of the picture, and I wanted the user to use arrow keys to got through the pics while staying in the full size view. I also have "prev" and "next" buttons that should work the same. I think the result is clean and this is what I did:
SingleEntryView = Backbone.View.extend({
initialize : function() {
// Here I save a reference to the currentIndex by getting the index
// of the current model within the collection.
this.currentIndex = this.collection.indexOf(this.model);
// Important: here I attach the keydown event to the whole document,
// so that the user doesn't necessarily have to focus the view's
// element to use the arrows.
$document.on('keydown.singleEntry', this.onKeyDown.bind(this));
},
// Having attached the keydown event to document, there's no autocleaning.
// Overriding remove to detach the listener when the view goes away.
remove : function() {
$document.off('.singleEntry');
Backbone.View.prototype.remove.call(this);
},
// Keydown listener. Interested only in arrow keys.
onKeyDown : function(e) {
if (e.keyCode == 37) // left arrow
this.prev();
else if (e.keyCode == 39) // right arrow
this.next();
return true;
},
// Click events on the prev/next buttons (they behave == to the arrow keys)
events : {
'click #prev' : 'prev',
'click #next' : 'next'
},
// Handlers shared by both prev/next buttons and arrow keys.
// What is the current index? Go to the prev/next one.
// If we are at the start/end, wrap around and go to the last/first.
prev : function() {
this.goTo(this.currentIndex > 0 ? this.currentIndex - 1 : this.collection.length - 1);
return false;
},
next : function() {
this.goTo(this.currentIndex < this.collection.length - 1 ? this.currentIndex + 1 : 0);
return false;
},
goTo : function(i) {
this.model = this.collection.at(i);
this.currentIndex = i;
// App is my Router
App.navigate('app/boards/' + this.collection.id + '/entries/' + this.model.id, {
trigger: true
});
}
}
Related
Edit: I think I got the solution! I want to try and fix this myself before I ask for further help = )
First script inhibits the second one from functioning as the click event from the first one overides the second one. Because the second one does not function it is impossible to open the drop down menu to select a list item to trigger the first scripts click.
What I tried was replacing all return false statements with event.stopPropagation(). Didnt work however. Tried re-ordering my scripts but that failed as well. I was thinking of making my second script target another parent div but that didnt work either.I also tried event.stopImmediatePropagation() and .bind methods.
Any idea?
First script that makes the drop down function. Contains click event.
function DropDown(el) {
this.f = el;
this.placeholder = this.f.children('span');
this.opts = this.f.find('ul.dropdown > li');
this.val = '';
this.index = -1;
this.initEvents();
}
DropDown.prototype = {
initEvents : function() {
var obj = this;
obj.f.on('click', function(event){
$(this).toggleClass('active');
return false;
});
obj.opts.on('click',function(){
var opt = $(this);
obj.val = opt.text();
obj.index = opt.index();
obj.placeholder.text(obj.val);
});
},
getValue : function() {
return this.val;
},
getIndex : function() {
return this.index;
}
}
$(function() {
var f = new DropDown( $('#f') );
$(document).click(function() {
// all dropdowns
$('.filter-buttons').removeClass('active');
});
});
Second script that does the filtering, also contains click event:
jQuery(document).ready(function(e) {
var t = $(".filter-container");
t.imagesLoaded(function() {
t.isotope({
itemSelector: "figure",
filter: "*",
resizable: false,
animationEngine: "jquery"
})
});
$(".filter-buttons a").click(function(evt) {
var n = $(this).parents(".filter-buttons");
n.find(".selected").removeClass("selected");
$(this).addClass("selected");
var r = $(this).attr("data-filter");
t.isotope({
filter: r
});
evt.preventDefault();
});
$(window).resize(function() {
var n = $(window).width();
t.isotope("reLayout")
}).trigger("resize")
});
html structure
<div id="f" class="filter-buttons" tabindex="1">
<span>Choose Genre</span>
<ul class="dropdown">
<li>All</li>
<li>Electronic</li>
<li>Popular</a></li>
</ul>
</div>
This doesn't really solve your problem but I was bored while drinking my coffee and felt like helping you write your dropdown plugin a little nicer
My comments below are inline with code. For uninterrupted code, see DropDown complete paste.
We start with your standard jQuery wrapper (function($){ ... })(jQuery)
(function($) {
// dropdown constructor
function DropDown($elem) {
First we'll make some private vars to store information. By using this.foo = ... we expose things (probably) unnecessarily. If you need access to these vars, you can always create functions to read them. This is much better encapsulation imo.
// private vars
var $placeholder = $elem.children("span");
var $opts = $elem.find("ul.dropdown > li")
var value = "";
var index = -1;
Now we'll define our event listeners and functions those event listeners might depend on. What's nice here is that these functions don't have to access everything via this.* or as you were writing obj.f.* etc.
// private functions
function onParentClick(event) {
$elem.toggleClass("active");
event.preventDefault();
}
function onChildClick(event) {
setValue($(this));
event.preventDefault();
}
function setValue($opt) {
value = $opt.text();
index = $opt.index();
$placeholder.text(value);
}
Here's some property descriptors to read the index and value
// properties for reading .index and .value
Object.defineProperty(this, "value", {
get: function() { return value; }
});
Object.defineProperty(this, "index", {
get: function() { return index; }
});
Lastly, let's track each instance of DropDown in an array so that the user doesn't have to define a special listener to deactivate each
// track each instance of
DropDown._instances.push(this);
}
This is the array we'll use to track instances
// store all instances in array
DropDown._instances = [];
This event listener deactivate each "registered" instance of DropDown
// deactivate all
DropDown.deactiveAll = function deactiveAll(event) {
$.each(DropDown._instances, function(idx, $elem) {
$elem.removeClass("active");
});
}
Here's the document listener defined right in the plugin! The user no longer has to set this up
// listener to deactiveAll dropdowns
$(document).click(DropDown.deactiveAll);
Might as well make it a jQuery plugin since everything in our DropDown constructor relies upon jQuery. This let's the user do var x = $("foo").dropdown();
// jQuery plugin
$.fn.dropdown = function dropdown() {
return new DropDown($(this));
};
Close the wrapper
})(jQuery);
Now here's how you use it
$(function() {
var x = $('#f').dropdown();
// get the value
f.value;
// get the index
f.index;
});
Anyway, yeah I know this doesn't really help you with your click listeners, but I hope this is still useful information to you. Off to the Post Office now!
I think you're going to need to simplify this to figure out what's going on. There's actually not enough information to see what elements the events are being attached to here.
For argument's sake, open the console and try the following:
$(document).on('click', function() { console.log('first'); return false; });
$(document).on('click', function() { console.log('second'); return false; });
Then click in the page. You'll see that both events are triggered. It might well be that your code is actually attaching the events to different elements (you don't say anywhere). If that's the case then you need to understand how event bubbling works in the DOM.
When you trigger an event, say a click on an element, that event will fire on that element, and then on it's parent, then grandparent etc all the way to the root node at the top.
You can change this behaviour by calling functions in the event itself. evt.stopPropagation tells the event to not bubble up to the ancestor nodes. evt.preventDefault tells the browser not to carry out the default behaviour for a node (eg, moving to the page specified in the href for an A tag).
In jQuery, return false from an event handler is a shortcut for, evt.preventDefault and evt.stopPropagation. So that will stop the event dead in its tracks.
I imagine you have something like:
<div event_two_on_here>
<a event_one_on_here>
</div>
If the thing that handles event_one_on_here calls stopPropagation then event_two_on_here will never even know it has happened. Calling stopPropagation explicitly, or implicitly (return false) will kill the event before it travels to the parent node/event handler.
UPDATE: In your case the issue is that the handler on .filter-buttons a is stopping the propagation (so #f doesn't get to run its handler).
$(".filter-buttons a").click(function(evt) {
// your code here...
// Don't do this - it stops the event from bubbling up to the #f div
// return false;
// instead, you'll probably just want to prevent the browser default
// behaviour so it doesn't jump to the top of the page ('url/#')
evt.preventDefault();
});
I want one button to toggle two methods in backbone but I'm having issues. I'm pretty much new to JS in general.
If you click on a button:
I want to show a hidden div
change the text of the button clicked
Then, if you click the button again (which has the new text and the hidden div is shown)
Change the text
Hide the shown div
The second method of .hide is not being fired? I'm wondering if this is because .hide is not in the DOM initially, because it's being added on the show method. Just a guess and maybe there's a better way to toggle methods on one class?
Here's my JS
'touchstart .share-btn' : 'show',
'touchstart .hide' : 'hide'
'show' : function (e) {
var view = this;
$(e.currentTarget).closest('.tile').find('.share-tools').fadeIn('fast');
$(e.currentTarget).addClass('hide');
if ($(e.currentTarget).hasClass('hide')){
$(e.currentTarget).find('.button-copy').closest('.button-copy').html('close');
}
},
'hide' : function (e) {
var view = this;
if($(e.currentTarget).hasClass('hide')) {
$('.share-tools').fadeOut('fast');
$(e.currentTarget).removeClass('hide');
$(e.currentTarget).find('.button-copy').closest('.button-copy').html('share');
}
},
Maybe reworking your code a bit will help. I've created a working jsfiddle based on what I think you're trying to accomplish.
Here is the relevant view code:
var View = Backbone.View.extend({
...
// Make it clear that these are the same element.
// Ensure they will not both fire by making them exclusive.
events: {
'mousedown .share-btn:not(.hide)' : 'show',
'mousedown .share-btn.hide' : 'hide'
},
'show' : function (e) {
console.log('show');
var $e = $(e.currentTarget);
$e.closest('.tile').find('.share-tools').fadeIn('fast', function () {
$e.addClass('hide');
});
$e.find('.button-copy').closest('.button-copy').html('close');
},
'hide' : function (e) {
console.log('hide');
var $e = $(e.currentTarget);
$e.closest('.tile').find('.share-tools').fadeOut('fast', function () {
$e.removeClass('hide');
});
$e.find('.button-copy').closest('.button-copy').html('share');
}
});
You can find the working jsfiddle here: http://jsfiddle.net/somethingkindawierd/7rfs9/
Try to return false in your event listener to prevent call both methods on first click.
What I am expecting from my code is this:
When clicking a button, a menu of options appears at the pointer position. Any following click, whether on a menu item or elsewhere in the browser, should close the menu. Clicking on a menu item closes the menu, but not clicking anywhere else. When I uncomment $(document.body).one('click', function() {menu.remove()} the menu never appears in the first place, and I suspect that I somehow have it arranged so that the click to bring up the menu actually closes the menu as well. Here is the code:
render : function() {
this.$el.html(this.template(this.model.toJSON()));
var that = this;
if (this.model.attributes.memberType != 'OWNER') {
this.$('.memberTypeSelector').button({
icons : {
secondary : "ui-icon-triangle-1-s"
}
}).click(function(event) {
that.showPermissions(that.model, event, that);
});
...
},
showPermissions : function(member, event, view) {
var levels = ['ADMIN', 'CONTRIBUTOR', 'VIEWER'];
var menu = $('<ul>');
$.each(levels, function() {
if(member.attributes.memberType !== this) {
var item = $('<li>').appendTo(menu);
$('<a>').attr('href', '#').text(this).appendTo(item).click(function() {
menu.remove();
view.changePermission(member, this.text, view);
});
}
});
menu.menu().css({
position : 'absolute',
left : event.clientX,
top : event.clientY
});
$(document.body).append(menu);
/*$(document.body).one('click', function() {
menu.remove();
});*/
}
Thanks in advance for your help.
If you delay binding to the document by 10ms, that should be enough time for the event to propagate to the body so that it doesn't immediately close the menu, then the next click on the menu will result in the body click handler triggering.
setTimeout(function(){
$(document.body).one('click', function() {menu.remove();});
},10)
you can't use stop propagation or anything similar because that would also stop the 2nd click on the menu.
While delaying the second event binding will probably work 99.999% of the time, I can't help but feel that nagging 'what if' for the one time that something lags and it doesn't work.
This question provides a more satisfactory (at least to me) solution
I'm struggling to get the below piece of code working. The problem is that when I wrap the two functions in the editItems property inside the parenthesis (), the code behaves strangely and assigns display: none inline css property to the edit button.
If I don't wrap the two functions inside the parenthesis, I get a javascript syntax error function statement requires a name.
var shoppingList = {
// Some code ...
'init' : function() {
// Capture toggle event on Edit Items button
(shoppingList.$editButton).toggle(shoppingList.editItems);
},
'editItems' : function() {
(function() {
$(this).attr('value', 'Finish editing');
(shoppingList.$ingrLinks).unbind('click', shoppingList.ingredients) // disable highlighting items
.removeAttr('href');
$('.editme').editable("enable");
$('.editme').editable('http://localhost:8000/edit-ingredient/', {
indicator : 'Saving...',
tooltip : 'Click to edit...',
submit : 'OK',
cancel : 'Cancel'
});
}), (function() {
$(this).attr('value', 'Edit item');
(shoppingList.$ingrLinks).attr('href', '#');
$('.editme').editable("disable");
(shoppingList.$ingrLinks).bind('click', shoppingList.ingredients) // re-enable highlighting items
})
}
}
$(document).ready(shoppingList.init);
However, if I invoke the toggle event "directly" like this, it works:
var shoppingList = {
// Some code ...
'init' : function() {
// Toggle event on Edit Items button
(shoppingList.$editButton).toggle(
function() {
$(this).attr('value', 'Finish editing');
(shoppingList.$ingrLinks).unbind('click', shoppingList.ingredients) // disable highlighting items
.removeAttr('href');
$('.editme').editable("enable");
$('.editme').editable('http://localhost:8000/edit-ingredient/', {
indicator : 'Saving...',
tooltip : 'Click to edit...',
submit : 'OK',
cancel : 'Cancel'
});
}, function() {
$(this).attr('value', 'Edit item');
(shoppingList.$ingrLinks).attr('href', '#');
$('.editme').editable("disable");
(shoppingList.$ingrLinks).bind('click', shoppingList.ingredients) // re-enable highlighting items
});
}
};
$(document).ready(shoppingList.init);
Is there a way I could store the toggle event inside the editItems object literal and still have it working as expected?
editItems function looks really odd. I guess you just need to define 2 functions: startEdit and endEdit. And bind them on even and odd clicks using toggle.
var shoppingList = {
// Some code ...
init : function() {
// Bind on edit button click
this.$editButton.toggle(this.startEdit, this.endEdit);
},
startEdit : function() {
$(this).attr('value', 'Finish editing');
shoppingList.$ingrLinks.unbind('click', shoppingList.ingredients) // disable highlighting items
.removeAttr('href');
$('.editme').editable("enable");
$('.editme').editable('http://localhost:8000/edit-ingredient/', {
indicator : 'Saving...',
tooltip : 'Click to edit...',
submit : 'OK',
cancel : 'Cancel'
}),
endEdit: function() {
$(this).attr('value', 'Edit item');
(shoppingList.$ingrLinks).attr('href', '#');
$('.editme').editable("disable");
(shoppingList.$ingrLinks).bind('click', shoppingList.ingredients) // re-enable highlighting items
})
};
$($.proxy(shoppingList, 'init'));
i use this code to react on the swipeleft/swiperight event:
$('body').live('pagecreate', function(event) {
$('div[data-role="page"]').live("swipeleft", function() {
var nextpage = $(this).next('div[data-role="page"]');
// swipe using id of next page if exists
if (nextpage.length > 0) {
$.mobile.changePage(nextpage);
}
});
$('div[data-role="page"]').live("swiperight", function() {
var prevpage = $(this).prev('div[data-role="page"]');
// swipe using id of previous page if exists
if (prevpage.length > 0) {
$.mobile.changePage(prevpage, {
reverse : true,
});
}
});
});
It works, but after about 3 swipes (maybe when i reach the end of the 4 pages) there´s no normal behaviour anymore. For example: I swipe left --> i get the nextpage but then it swipes back and then again (i reach the expected page but not in that case i want). That happens after about 3 swipes all the time. What´s wrong with the code?
Thx a lot!
You know there is a plugin from the JQM devs just for that: JQM pagination
I think your problem is related to multiple bindings.
Put a console.log in every binding to see how often it fires. Like so:
$('body').live('pagecreate', function(event) {
console.log( "PAGECREATE fired")
$('div[data-role="page"]').live("swipeleft", function() {
console.log("binding to swipe-left on "+$(this).attr('id') );
var nextpage = $(this).next('div[data-role="page"]');
// swipe using id of next page if exists
if (nextpage.length > 0) {
$.mobile.changePage(nextpage);
}
});
$('div[data-role="page"]').live("swiperight", function() {
console.log("binding to swipe-right "+$(this).attr('id');
var prevpage = $(this).prev('div[data-role="page"]');
// swipe using id of previous page if exists
if (prevpage.length > 0) {
$.mobile.changePage(prevpage, {
reverse : true,
});
}
});
});
If these fire more than once, you will attach multiple bindings to your pages, which will all trigger changePage on swipe, when you only want one event to fire with every swipe.
EDIT:
First up, if you are using latest Jquery you should bind using on/off and not use live anymore.
One way would be to unbind on pagehide and re-bind when the page is reloaded. I guess that would be recommended way. However if you are not removing the page from the DOM when swiping to the next page, you will unbind and since pagecreate will not fire again (page still in the DOM, no need to create), you will not bind again when you swipe back.
I'm also dealing with this a lot and am using this:
$(document).on('pageshow', 'div:jqmData(role="page")', function(){
var page = $(this), nextpage, prevpage;
// check if the page being shown already has a binding
if ( page.jqmData('bound') != true ){
// if not, set blocker
page.jqmData('bound', true)
// bind
.on('swipeleft.paginate', function() {
console.log("binding to swipe-left on "+page.attr('id') );
nextpage = page.next('div[data-role="page"]');
if (nextpage.length > 0) {
$.mobile.changePage(nextpage);
}
})
.on('swiperight.paginate', function(){
console.log("binding to swipe-right "+page.attr('id');
prevpage = page.prev('div[data-role="page"]');
if (prevpage.length > 0) {
$.mobile.changePage(prevpage, {
reverse : true,
});
};
});
}
});
This will fire with every pageshow and check if the page is bound. If not, it sets the bindings on this page. The next time pageshow fires bound will be true, so it will not re-bind. If the page is removed from the DOM and reloaded, bound will not be set and the binding will be reset.
I have also added .paginate to your swipeleft/swiperight so you could remove them all at once using off