Skip to content

Instantly share code, notes, and snippets.

@phaedryx

phaedryx/1-application.js.coffee

Created November 19, 2011 21:52
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save phaedryx/1379410 to your computer and use it in GitHub Desktop.
Save phaedryx/1379410 to your computer and use it in GitHub Desktop.
Download ZIP
Example code for my DragMarkers project (part 1)
Raw
1-application.js.coffee
#= require spine/spine
#= require spine/ajax
#= require_tree ./lib
#= require_self
#= require_tree ./models
#= require_tree ./controllers
#= require_tree ./views
#= require_tree .
class App extends Spine.Controller
constructor: ->
super
window.App = App
Raw
1-marker.js.coffee
class App.Marker extends Spine.Model
@configure 'Marker', 'latitude', 'longitude', 'icon'
@extend Spine.Model.Ajax
constructor: ->
super
Raw
1-markers_controller.js.coffee
$ = jQuery.sub()
Marker = App.Marker
class App.MarkersController extends Spine.Controller
elements:
"#map" : "mapEl"
".marker" : "markerIcons"
constructor: ->
super
@html JST["views/markers/index"]
Raw
application.css
body, html {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
overflow: auto;
}
#page {
width: 650px;
margin: 10px auto;
}
Raw
application.html.erb
<!DOCTYPE html>
<html>
<head>
<title>DragMarkers</title>
<script src="http://ajax.cdnjs.com/ajax/libs/json2/20110223/json2.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js" type="text/javascript"></script>
<script src="http://maps.googleapis.com/maps/api/js?sensor=false" type="text/javascript"></script>
<%= stylesheet_link_tag "application" %>
<%= javascript_include_tag "application" %>
<%= csrf_meta_tags %>
</head>
<body>
<div id="page">
<%= yield %>
</div>
</body>
</html>
Raw
create_markers.rb
class CreateMarkers < ActiveRecord::Migration
def change
create_table :markers do |t|
t.decimal :latitude
t.decimal :longitude
t.string :icon
t.timestamps
end
end
end
Raw
final-application.js.coffee
#= require jquery_ujs
#= require spine/spine
#= require spine/manager
#= require spine/ajax
#= require spine/route
#= require_tree ./lib
#= require_self
#= require_tree ./models
#= require_tree ./controllers
#= require_tree ./views
#= require_tree .
class App extends Spine.Controller
constructor: ->
super
@append(new App.MarkersController)
window.App = App
Raw
index.html.erb
<div id="app"></div>
<script type="text/javascript" charset="utf-8">
jQuery(function(){
new App({el: $('#app')});
});
</script>
Raw
index.jst.eco
<div id="map"></div>
<img id="0" class="marker" src="/assets/0.png" />
<img id="1" class="marker" src="/assets/1.png" />
<img id="2" class="marker" src="/assets/2.png" />
<img id="3" class="marker" src="/assets/3.png" />
<img id="4" class="marker" src="/assets/4.png" />
<img id="5" class="marker" src="/assets/5.png" />
<img id="6" class="marker" src="/assets/6.png" />
<img id="7" class="marker" src="/assets/7.png" />
<img id="8" class="marker" src="/assets/8.png" />
<img id="9" class="marker" src="/assets/9.png" />
Raw
routes.rb
Dragmarkers::Application.routes.draw do
resources :markers
root to: 'markers#index'
end
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment