Backbone.js：根据click事件过滤集合

Question

修改添加了有关我迄今为止尝试过的内容的其他信息。

我正构建一个应用程序，显示组织成员的要点，受到bl.ocks.org的启发。

我想允许用户点击该组织中用户的图片/名称，以仅显示该人的要点。请参阅下面的屏幕截图。

我有一个驱动此页面的视图（下面的源代码），它遍历gists对象以显示矩形图像和users对象以显示用户头像和名称。 Backbone会将一个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>

Answer 1

您需要在html代码中添加一个按钮，并创建一个属性，该属性可以是一种有用的数据＆＃39;来自html的标签。然后添加一个id以向某个用户标识该按钮。

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

然后在视图中创建以下事件。

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


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

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

希望它有所帮助。