javascript - Backbone.js:根据点击事件过滤集合

Question

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

我正在构建一个应用程序，显示组织成员的要点，灵感来自 bl.ocks.org .

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

我有一个驱动此页面的 View (下面的源代码)，它迭代 gists 对象以显示矩形图像和 users 对象以显示用户头像和名字。 Backbone 将向关联的方法发送一个 jquery 事件对象来处理该事件，我可以从中获取元素的 id (e.currentTarget.id)。有没有更优雅的方法来跟踪哪个图像对应于哪个用户，而不传递元素的 id？

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

使用下划线模板

<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 代码中添加一个按钮，并创建一个可以是 html 中的“数据”标记的属性。然后添加一个 id 来向某个用户标识该按钮。

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

然后在您的 View 中创建以下事件。

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


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

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

希望有帮助。