Skip to content

Instantly share code, notes, and snippets.

@jokull

jokull/index.html

Created September 7, 2011 11:40
Show Gist options
  • Save jokull/1200349 to your computer and use it in GitHub Desktop.
Save jokull/1200349 to your computer and use it in GitHub Desktop.
Download ZIP
Public Instagram hashtag using Backbone.js and CoffeeScript
Raw
index.html
<html>
<head>
<script type="text/template" id="tpl-instagram-post">
<a href="<%= link %>"><img src="<%= images.low_resolution.url %>"></a>
<p class="date"><%= created_time %></p>
<p class="user">@<%= user.username %></p>
<% if(caption){ %>
<p class="caption"><%= caption.text %></p>
<% } %>
</script>
/* jquery, underscore.js, backbone.js, instagram.coffee, script.coffee */
</head>
<body>
<div id="instagram"></div>
</body>
</html>
Raw
instagram.coffee
class window.InstagramPost extends Backbone.Model
class window.Instagram extends Backbone.Collection
model: InstagramPost
class window.InstagramView extends Backbone.View
el: "#instagram"
initialize: (options) ->
@collection.bind "add", @add
add: (model) =>
model.view = new InstagramPostView model: model
($ @el).append model.view.render().el
class window.InstagramPostView extends Backbone.View
className: "post"
initialize: (options) ->
@model.bind "change", @render
@render()
render: =>
tpl = _.template ($ "#tpl-instagram-post").html()
($ @el).html (tpl @model.toJSON())
return @
Raw
script.coffee
window.MyApp =
collections: {},
models: {},
views: {},
instagram: {
client_id: client_id, # EDIT
count: count, # EDIT
hashtag: "hashtag" # EDIT
}
}
$->
$.ajax
url: 'https://api.instagram.com/v1/tags/#{ MyApp.instagram.hashtag }/media/recent?count=#{ MyApp.instagram.count}&client_id=#{ MyApp.instagram.client_id }'
dataType: "jsonp"
success: (data, status) =>
MyApp.collections.instagram = new Instagram
MyApp.views.instagram = new InstagramView collection: MyApp.collections.instagram
MyApp.collections.instagram.add data.data
@neozhang
Copy link

Hi Jokull,

Thanks for the sharing. Don't you have cross domain issues with the AJAX call?

@jokull
Copy link
Author

jokull commented Mar 11, 2012 via email

@neozhang
Copy link

neozhang commented Mar 11, 2012 via email

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment