Skip to content
Create a gist now

Instantly share code, notes, and snippets.

Spine Contacts Screencast
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) -> isnt -1 or isnt -1 or isnt -1
addLocation: ->
navigator.geolocation?.getCurrentPosition (position) =>
@lat = position.coords.latitude
@lng = position.coords.longitude
removeLocation: ->
@lat = null
@lng = null
module.exports = Contact
class Edit extends Spine.Controller
className: 'edit'
'submit form': 'submit'
'click .save': 'submit'
'click .delete': 'delete'
'click .addLocation': 'addLocation'
'click .removeLocation': 'removeLocation'
'form': 'form'
constructor: ->
Contact.bind 'change', (contact) =>
@render() if contact.eql(@item)
@active @change
addLocation: ->
removeLocation: ->
<a class="save">Save</a>
<a class="delete">Delete</a>
<div class="content">
<input type="text" name="name" value="<%= @name %>">
<input type="email" name="email" value="<%= @email %>">
<input type="text" name="mobile" value="<%= @mobile %>">
<% if @lat and @lng: %>
<p><a class="removeLocation">Remove Location</a></p>
<% else: %>
<p><a class="addLocation">Add Location</a></p>
<% end %>
<a class="edit">Edit</a>
<div class="content">
<p><%= @name %></p>
<p><%= @email %></p>
<p><%= @mobile %></p>
<% if @lat and @lng: %>
<img src="<%= @lat %>,<%= @lng %>&zoom=15&size=400x400&sensor=false">
<% end %>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.