Javascript Backbone.js：根据单击事件筛选集合

编辑添加了有关我迄今为止所做尝试的其他信息

我正在开发一个应用程序，显示组织成员的GIST，灵感来自

我希望允许用户单击该组织用户的图片/姓名，仅显示该用户的GIST。请参见下面的屏幕截图

我有一个单一的视图来驱动这个页面（下面的源代码），它在

gists

对象上迭代以显示矩形图像，在

users

对象上迭代以显示用户的化身和名称。主干将向处理该事件的关联方法发送一个jquery事件对象，从中我可以获得元素的id（

e.currentTarget.id

）。有没有更优雅的方法来跟踪哪个图像对应于哪个用户，而不传递元素的id

以下是视图的源代码：

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

使用下划线模板

<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>

英国的政治家
" />

您需要在html代码中添加一个按钮，并创建一个属性，该属性可以是html中的一种“数据”标记。然后添加一个id以向某个用户标识该按钮

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

现在您知道了从哪个用户显示信息，您可以在集合中搜索@userId并呈现内容

希望能有帮助

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


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