public
Last active

Spine Contacts Screencast

  • Download Gist
contact.coffee
CoffeeScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27
Spine = require('spine')
 
class Contact extends Spine.Model
@configure 'Contact', 'name', 'email', 'mobile', 'lat', 'lng'
@extend Spine.Model.Local
@filter: (query) ->
return @all() unless query
query = query.toLowerCase()
@select (item) ->
item.name?.toLowerCase().indexOf(query) isnt -1 or
item.email?.toLowerCase().indexOf(query) isnt -1 or
item.mobile.indexOf(query) isnt -1
addLocation: ->
navigator.geolocation?.getCurrentPosition (position) =>
@lat = position.coords.latitude
@lng = position.coords.longitude
@save()
removeLocation: ->
@lat = null
@lng = null
@save()
module.exports = Contact
edit.coffee
CoffeeScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24
class Edit extends Spine.Controller
className: 'edit'
events:
'submit form': 'submit'
'click .save': 'submit'
'click .delete': 'delete'
'click .addLocation': 'addLocation'
'click .removeLocation': 'removeLocation'
elements:
'form': 'form'
constructor: ->
super
Contact.bind 'change', (contact) =>
@render() if contact.eql(@item)
@active @change
addLocation: ->
@item.addLocation()
removeLocation: ->
@item.removeLocation()
form.eco
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31
<header>
<a class="save">Save</a>
<a class="delete">Delete</a>
</header>
 
<div class="content">
<form>
<label>
<span>Name</span>
<input type="text" name="name" value="<%= @name %>">
</label>
<label>
<span>Email</span>
<input type="email" name="email" value="<%= @email %>">
</label>
<label>
<span>Mobile</span>
<input type="text" name="mobile" value="<%= @mobile %>">
</label>
<% if @lat and @lng: %>
<p><a class="removeLocation">Remove Location</a></p>
<% else: %>
<p><a class="addLocation">Add Location</a></p>
<% end %>
<button>Save</button>
</form>
</div>
show.eco
1 2 3 4 5 6 7 8 9 10 11 12 13
<header>
<a class="edit">Edit</a>
</header>
 
<div class="content">
<p><%= @name %></p>
<p><%= @email %></p>
<p><%= @mobile %></p>
 
<% if @lat and @lng: %>
<img src="http://maps.googleapis.com/maps/api/staticmap?center=<%= @lat %>,<%= @lng %>&zoom=15&size=400x400&sensor=false">
<% end %>
</div>

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.