Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Example code for my DragMarkers project (part 1)
#= 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
class App.Marker extends Spine.Model
@configure 'Marker', 'latitude', 'longitude', 'icon'
@extend Spine.Model.Ajax
constructor: ->
super
$ = jQuery.sub()
Marker = App.Marker
class App.MarkersController extends Spine.Controller
elements:
"#map" : "mapEl"
".marker" : "markerIcons"
constructor: ->
super
@html JST["views/markers/index"]
body, html {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
overflow: auto;
}
#page {
width: 650px;
margin: 10px auto;
}
<!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>
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
#= 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
<div id="app"></div>
<script type="text/javascript" charset="utf-8">
jQuery(function(){
new App({el: $('#app')});
});
</script>
<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" />
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
You can’t perform that action at this time.