Spine Contacts Screencast

contact.coffee

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

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

<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

<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>