Backbone.js: Filter a collection based on a click event

Question

edit added additional information regarding what I've tried so far.

I'm building an app that shows the gists of members of an organization, inspired by bl.ocks.org .

I would like to allow users to click on the picture/name of a user from that organization to display only the gists by that person. See a screenshot below.

I have a single view driving this page (source code below) that iterates over a gists object to display the rectangular images and a users object to display the user avatars and names. Backbone will send an jquery event object through to the associated method for handling that event, from which I can get the id of the element ( e.currentTarget.id ). Is there a more elegant way to keep track of which image corresponds to which user, without passing around the id of the element?

Here is the source for the view:

define ['backbone','app/collections/gists','text!templates/gists.html'], (Backbone, GistCollection, GistsTemplate) ->

  class GistsView extends Backbone.View

    el: ".content"

    events: {}

    template: _.template(GistsTemplate)

    initialize: (models, options)->
      @listenTo(@collection, 'sync', @render)

    render: ->
      myHtml = @template {gists: @collection.toJSON(), org: @collection.org || "", users: @collection.users}
      @$el.html myHtml
      return this

with the underscore template

<div class="row">
  <h2><%= org%>'s gists</h2>
</div>
<div class="row col-lg-9">
  <% _.each(gists, function(gist) { %>
    <div class="col-lg-3 col-sm-4 col-xs-6">
        <a href="#/<%=gist.id%>" class="gist thumbnail"
        <% if (gist.files.hasOwnProperty("thumbnail.png")){ %>
          style="background-image: url(<%= gist.files["thumbnail.png"].raw_url %>"
        <% } %>
        >
          <span class="description"><%=gist.description%></span>
        </a>
    </div>
  <% }); %>
  </div>



  <div class="row col-lg-3">
    <% _.each(users, function(user) { %>
      <div class="row user" id="<%=user.login%>">
        <div class="col-lg-4">
          <img class= "img-responsive img-circle" src="<%= user.avatar_url %>" />
        </div>
        <div class="col-lg-8">
          <%= user.login %>
        </div>
      </div>
    <% }); %>
  </div>

Answer 1

You'll need to add a button inside your html code and create an attribute that can be a kinda 'data' tag from html. Then add an id to identify that button to some user.

<button data-Userid=""<%=user.userID %> >See Gist</button>

Then inside your view, create the following event.

events:->
    "click button":"ShowGistInfomation"


showGistInformation:(element)->
    @userId = element.target.attributes('data-Userid')
    //Get This user from collection and render what you need.

Now that you know from wich user display the info, you can search for the @userId inside the collection and render the content.

Hope it helps.