Skip to content

Instantly share code, notes, and snippets.

@dbackeus
Forked from zalavariandris/EditView.coffee
Last active August 29, 2015 14:09

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

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()
<template name="Edit">
<span contenteditable name='{{name}}' placeholder='{{name}}' class="Edit"></span>
</template>
# 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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment