[英]Backbone.js: Filter a collection based on a click event
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 . 我正在构建一个应用程序,该应用程序显示受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. 我有一个驱动该页面的单一视图(下面的源代码),该视图在
gists
对象上进行迭代以显示矩形图像,并在users
对象上进行迭代以显示用户化身和名称。 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
). 骨干网将通过一个jquery事件对象发送到用于处理该事件的关联方法,从中可以获取元素的ID(
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? 有没有一种更优雅的方式来跟踪哪个图像对应于哪个用户,而无需传递元素的id?
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>
You'll need to add a button inside your html code and create an attribute that can be a kinda 'data' tag from html. 您需要在html代码中添加一个按钮,并创建一个属性,该属性可以是html中的“数据”标签。 Then add an id to identify that button to some user.
然后添加一个ID,以向某些用户标识该按钮。
<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. 现在,您已经知道从哪个用户显示信息,您可以在集合中搜索@userId并呈现内容。
Hope it helps. 希望能帮助到你。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.