StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
primarykey
Id
7624972
data
AcceptedAnswerId
0
AnswerCount
0
ClosedDate
CommentCount
0
CommunityOwnedDate
CreationDate
2011-10-02T06:35:56.063
FavoriteCount
0
LastActivityDate
2011-10-02T06:35:56.063
LastEditDate
LastEditorUserId
0
OwnerUserId
381402
ParentId
5673220
PostTypeId
2
Score
8
ViewCount
0
LastEditorDisplayName
text
Body
I am also working on a card game using <code>Backbone.js</code> on Canvas and came across this question. What I am currently doing is have a <code>CardView</code> that has <code>el</code> as a canvas tag so that a canvas will be created on initialization. All the drawing of the card is done on this view's <code>render</code> method. However, this canvas will not be added to the <code>DOM</code>. I then have a <code>Hand</code>, which is a <code>Backbone.Collection</code> to hold a collection of cards. This collection has a <code>Backbone.View</code> attached to the game canvas (the only and big one in the <code>DOM</code>). This view also holds an array of <code>Backbone.View</code>'s. Then I have: <pre><code>render: function() { var that = this; this.ctx.save(); _(this._views).each(function(view) { that.ctx.drawImage(view.render().el, 0, 0); that.ctx.translate(view.el.width, 0); }); this.ctx.restore(); }, </code></pre> Basically, I draw each view's canvas into the game canvas using <code>drawImage</code> of the context. I <code>addEventListener</code> to <code>HandView</code>'s canvas (which is its <code>el</code>) to handle click. In this handler, I check the mouse positions against which <code>CardView</code>, then manipulate that view. Mind you, this is just something I'm experimenting since I'm new to <code>Backbone.js</code> too. This maybe the worst way to do, but I just hope that you can see one of the ways to do it. I do wish that we could check mouse against a canvas that does not exists in the DOM. If it's possible, we could just <code>addEventListener</code> to <code>CardView</code>'s canvas and let it translate and re-render. No need for <code>HandView</code>'s canvas to loop through its views.
Tags
Title
singulars
PostAcceptedAnswerId
1. This table or related slice is empty.
PostParentId
1. POHow to bind a Backbone.js click event to a view rendered inside a HTML5 canvas?
 singulars
 PostTypePostTypeId
 PTQuestion
PostTypePostTypeId
1. PTAnswer
UserLastEditorUserId
1. This table or related slice is empty.
UserOwnerUserId
1. USsntran
plurals
PostLinksPostIdRelatedPostId
1. This table or related slice is empty.
PostLinksRelatedPostIdPostId
1. This table or related slice is empty.
PostsAcceptedAnswerId
1. This table or related slice is empty.
PostsParentIdCreationDate
1. This table or related slice is empty.
VotesPostIdCreationDate
1. VO
 singulars
 PostPostId
 PO
 UserUserId
 This table or related slice is empty.
 VoteTypeVoteTypeId
 VTUpMod
2. VO
 singulars
 PostPostId
 PO
 UserUserId
 This table or related slice is empty.
 VoteTypeVoteTypeId
 VTUpMod
3. VO
 singulars
 PostPostId
 PO
 UserUserId
 This table or related slice is empty.
 VoteTypeVoteTypeId
 VTUpMod
CommentsPostId
1. This table or related slice is empty.

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.