rivets.coffee
4.09 KB
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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
# rivets.js
# version : 0.1.4
# author : Michael Richards
# license : MIT
# The Rivets namespace.
Rivets = {}
# A single binding between a model attribute and a DOM element.
class Rivets.Binding
# All information about the binding is passed into the constructor; the DOM
# element, the type of binding, the context object and the keypath at which to
# listen to for changes.
constructor: (@el, @type, @context, @keypath) ->
@routine = Rivets.bindings[@type] || attributeBinding @type
# Sets a value for this binding. Basically just runs the routine on the
# element with a suplied value.
set: (value = null) =>
@routine @el, value || Rivets.config.adapter.read @context, @keypath
# Subscribes to the context object for changes on the specific keypath.
# Conditionally also does the inverse and listens to the element for changes
# to propogate back to the context object.
bind: =>
@set() if Rivets.config.preloadData
Rivets.config.adapter.subscribe @context, @keypath, (value) => @set value
if @type in bidirectionals
@el.addEventListener 'change', (el) =>
Rivets.config.adapter.publish @context, @keypath, getInputValue el
class Rivets.View
constructor: (@el, @contexts) ->
@build()
build: =>
@bindings = []
for node in @el.getElementsByTagName '*'
for attribute in node.attributes
if /^data-/.test attribute.name
type = attribute.name.replace 'data-', ''
path = attribute.value.split '.'
context = @contexts[path.shift()]
keypath = path.join '.'
@bindings.push new Rivets.Binding node, type, context, keypath
bind: =>
binding.bind() for binding in @bindings
# Returns the current input value for the specified element.
getInputValue = (el) ->
switch el.type
when 'text', 'textarea', 'password', 'select-one' then el.value
when 'checkbox', 'radio' then el.checked
# Returns an attribute binding routine for the specified attribute. This is what
# `registerBinding` falls back to when there is no routine for the binding type.
attributeBinding = (attr) -> (el, value) ->
if value then el.setAttribute attr, value else el.removeAttribute attr
# Returns a state binding routine for the specified attribute. Can optionally be
# negatively evaluated. This is used to build a lot of the core state binding
# routines.
stateBinding = (attr, inverse = false) -> (el, value) ->
binding = attributeBinding(attr)
binding el, if inverse is !value then attr else false
# Bindings that should also be observed for changes on the DOM element in order
# to propogate those changes back to the model object.
bidirectionals = ['value', 'checked', 'unchecked', 'selected', 'unselected']
# Core binding routines.
Rivets.bindings =
checked:
stateBinding 'checked'
selected:
stateBinding 'selected'
disabled:
stateBinding 'disabled'
unchecked:
stateBinding 'checked', true
unselected:
stateBinding 'selected', true
enabled:
stateBinding 'disabled', true
text: (el, value) ->
el.innerText = value or ''
html: (el, value) ->
el.innerHTML = value or ''
value: (el, value) ->
el.value = value
show: (el, value) ->
el.style.display = if value then '' else 'none'
hide: (el, value) ->
el.style.display = if value then 'none' else ''
# Default configuration.
Rivets.config =
preloadData: true
# The rivets module. This is the public interface that gets exported.
rivets =
# Used to set configuration options.
configure: (options={}) ->
for property, value of options
Rivets.config[property] = value
# Registers a new binding routine function that can be used immediately in the
# view. This is what is used to add custom data bindings.
register: (routine, routineFunction) ->
Rivets.bindings[routine] = routineFunction
# Binds a set of context objects to the specified DOM element. Returns a new
# Rivets.View instance.
bind: (el, contexts = {}) ->
view = new Rivets.View(el, contexts)
view.bind()
view
# Exports rivets for both CommonJS and the browser.
if module?
module.exports = rivets
else
@rivets = rivets