Readme.md

Bindings With Meteor

Two way bindings between Collections and contenteditable elements With Meteor UI

I've been missing two way bindings from Meteor. I wanted to figure out the lightest way to achive two way bindings with a contenteditable Span. This seems to be working, and easy super easy to integrate.

Misses even basic Error handling and a little more attention updating the innerText of the span element

Usage

{{>Edit name="propertyName"}}

EditView.coffee

Template.EditText = UI.Component.extend
  kind: "Edit"
  init: ->
    self = @

    @textDep = new Deps.Dependency
    @getText = ->
      self.textDep.depend()
      self.text

    Deps.autorun ->
      data = self.get()
      propertyName = self.get("bind")
      value = data.get(propertyName)
      
      unless self.isFocused
        self.text = value
        self.textDep.changed()
        
    @events =
      keydown: (event, template) ->
        if event.keyCode == 13
          event.preventDefault()
          event.stopImmediatePropagation()
              
      input: (event, template) ->
        model = self.get()
        propertyName = self.get("bind")
        json = {}
        json[propertyName] = $(event.target).text()
        model.update {$set: json}
  
      focus: ->
        self.isFocused = true
  
      blur: ->
        self.isFocused = false

  render: ->
    # UI.materialize accepts
    # ----------------------
    # - string, boolean, number
    # - Array
    # - function, (with reactivity)
    # - Components
    # - HTML.Tag, HTML.Raw, HTML.Comment, HTML.CharRef
    self = this
    HTML.DIV {
        contenteditable: -> !self.get("disabled")
      }, 
      -> self.getText()

EditView.html

<template name="Edit">
  <span contenteditable name='{{name}}' placeholder='{{name}}' class="Edit"></span>
</template>

Model.coffee

# DB Collection
collection = new Meteor.Collection "collection",
	transform: (doc)->
		new Model doc

# Model Class
class Model
	constructor: (doc)->
		for key in Object.keys doc
			this[key] = doc[key]

	update: (modifier, options, callback)->
		collection.update this._id, modifier, options, callback