Databases
StackOverflow2013
Postsdbo
PO
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>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:</p> <pre><code>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 &gt; 0 ? this.currentIndex - 1 : this.collection.length - 1); return false; }, next : function() { this.goTo(this.currentIndex &lt; 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 }); } } </code></pre>
    singulars
    1. This table or related slice is empty.
    1. POSelecting elements from a list with Backbone.js
      singulars
      1. PTQuestion
    1. PTAnswer
    1. USnamero999
    1. USnamero999
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. POSelecting elements from a list with Backbone.js
      singulars
      1. PTQuestion
    1. This table or related slice is empty.
    1. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTAcceptedByOriginator
    3. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    1. COCouldn't have asked for a better answer. I didn't consider using my router to retrieve the next model in the series. Thanks so much.
      singulars
      1. PO
      1. USuser2066880
    2. COEheh, to be completely honest, I've made it simpler for the purpose of this question, but in production I use a slightly different approach that will just describe here. As you noticed, I call the router with `trigger: true` to trigger the re-rendeting of the view with the new model. It's fine. But to optimize it a bit, you could call it with `replace: true` instead, that will only replace the url in the browser but won't trigger rerendering. You have to render the "new" pieces yourself (eg, I fill the "detail" box with plain jQuery selectors), but of course this would be super optimized!
      singulars
      1. PO
      1. USnamero999
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload