{ user.name } is { user.age } years old.
11 | ``` 12 | -------------------------------------------------------------------------------- /docs/docs/reference/_binders/unless.md: -------------------------------------------------------------------------------- 1 | Removes and unbinds the element as well as it's child nodes when the value evaluates to true and inserts / binds the element when the value evaluates to false. 2 | 3 | ```html 4 | 5 | ``` 6 | -------------------------------------------------------------------------------- /docs/docs/reference/_binders/if.md: -------------------------------------------------------------------------------- 1 | Inserts and binds the element as well as it's child nodes into the DOM when the value evaluates to true and removes / unbinds the element when the value evaluates to false. 2 | 3 | ```html 4 | 5 | ``` 6 | -------------------------------------------------------------------------------- /docs/docs/reference/_binders/class-[classname].md: -------------------------------------------------------------------------------- 1 | Adds a class (whatever value is in place of `[classname]`) on the element when the value evaluates to true and removes that class if the value evaluates to false. 2 | 3 | ```html 4 |Current bid: { auction.currentBid | money }
7 | 8 | 11 |Current bid: { auction.currentBid | money }
11 | 12 | 15 |: adapter for Backbone model attributes. It's up to you. Adapters take care of observing and reading each key in a keypath.
83 |
84 | section.using
85 | .container
86 | .row
87 | .col.col-sm-12
88 | .separator
89 | h5 WHO IS USING RIVETS.JS?
90 |
91 | .row
92 | .col.col-sm-12
93 | a(href="https://attendease.com/" target="_blank")
94 | img(src="/img/attendease.png")
95 | a(href="http://www.dell.com/" target="_blank")
96 | img(src="/img/dell.png")
97 | a(href="http://kinhr.com/" target="_blank")
98 | img(src="/img/kin.png")
99 | a(href="https://www.victoriassecret.com/" target="_blank")
100 | img(src="/img/vs.png")
101 | a(href="http://discolabs.com/" target="_blank")
102 | img(src="/img/disco.png")
103 |
104 | section.author
105 | .container
106 | .row
107 | .col.col-md-6.col-md-offset-3.col-sm-8.col-sm-offset-2
108 | h2 Author
109 | p Michael Richards is a Ruby/JavaScript developer, residing in beautiful Vancouver, British Columbia.
110 | img(src="/img/mikeric.jpg")
111 |
112 | .row
113 | .col.col-md-12
114 | a(href="http://github.com/mikeric")
115 | i.social
116 | a(href="http://twitter.com/mikeric")
117 | i.social
118 | a(href="http://linkedin.com/in/mikeric")
119 | i.social
120 | a(href="http://instagram.com/mikeric")
121 | i.social
122 | a(href="http://rdio.com/people/mikeric")
123 | i.social
124 |
--------------------------------------------------------------------------------
/docs/css/type.css:
--------------------------------------------------------------------------------
1 | /* Proxima Nova */
2 |
3 | @font-face {
4 | font-family: 'Proxima Nova';
5 | src: url('/fonts/proxima-nova/ProximaNova-Thin-webfont.eot');
6 | src: url('/fonts/proxima-nova/ProximaNova-Thin-webfont.eot?#iefix') format('embedded-opentype'),
7 | url('/fonts/proxima-nova/ProximaNova-Thin-webfont.woff') format('woff'),
8 | url('/fonts/proxima-nova/ProximaNova-Thin-webfont.ttf') format('truetype'),
9 | url('/fonts/proxima-nova/ProximaNova-Thin-webfont.svg#ywftsvg') format('svg');
10 | font-weight: 200;
11 | font-style: normal;
12 | }
13 |
14 | @font-face {
15 | font-family: 'Proxima Nova';
16 | src: url('/fonts/proxima-nova/ProximaNova-Light-webfont.eot');
17 | src: url('/fonts/proxima-nova/ProximaNova-Light-webfont.eot?#iefix') format('embedded-opentype'),
18 | url('/fonts/proxima-nova/ProximaNova-Light-webfont.woff') format('woff'),
19 | url('/fonts/proxima-nova/ProximaNova-Light-webfont.ttf') format('truetype'),
20 | url('/fonts/proxima-nova/ProximaNova-Light-webfont.svg#ywftsvg') format('svg');
21 | font-weight: 300;
22 | font-style: normal;
23 | }
24 |
25 | @font-face {
26 | font-family: 'Proxima Nova';
27 | src: url('/fonts/proxima-nova/ProximaNova-Reg-webfont.eot');
28 | src: url('/fonts/proxima-nova/ProximaNova-Reg-webfont.eot?#iefix') format('embedded-opentype'),
29 | url('/fonts/proxima-nova/ProximaNova-Reg-webfont.woff') format('woff'),
30 | url('/fonts/proxima-nova/ProximaNova-Reg-webfont.ttf') format('truetype'),
31 | url('/fonts/proxima-nova/ProximaNova-Reg-webfont.svg#ywftsvg') format('svg');
32 | font-weight: 400;
33 | font-style: normal;
34 | }
35 |
36 | @font-face {
37 | font-family: 'Proxima Nova';
38 | src: url('/fonts/proxima-nova/ProximaNova-Sbold-webfont.eot');
39 | src: url('/fonts/proxima-nova/ProximaNova-Sbold-webfont.eot?#iefix') format('embedded-opentype'),
40 | url('/fonts/proxima-nova/ProximaNova-Sbold-webfont.woff') format('woff'),
41 | url('/fonts/proxima-nova/ProximaNova-Sbold-webfont.ttf') format('truetype'),
42 | url('/fonts/proxima-nova/ProximaNova-Sbold-webfont.svg#ywftsvg') format('svg');
43 | font-weight: 500;
44 | font-style: normal;
45 | }
46 |
47 | @font-face {
48 | font-family: 'Proxima Nova';
49 | src: url('/fonts/proxima-nova/ProximaNova-Bold-webfont.eot');
50 | src: url('/fonts/proxima-nova/ProximaNova-Bold-webfont.eot?#iefix') format('embedded-opentype'),
51 | url('/fonts/proxima-nova/ProximaNova-Bold-webfont.woff') format('woff'),
52 | url('/fonts/proxima-nova/ProximaNova-Bold-webfont.ttf') format('truetype'),
53 | url('/fonts/proxima-nova/ProximaNova-Bold-webfont.svg#ywftsvg') format('svg');
54 | font-weight: 600;
55 | font-style: normal;
56 | }
57 |
58 | @font-face {
59 | font-family: 'Proxima Nova';
60 | src: url('/fonts/proxima-nova/ProximaNova-Xbold-webfont.eot');
61 | src: url('/fonts/proxima-nova/ProximaNova-Xbold-webfont.eot?#iefix') format('embedded-opentype'),
62 | url('/fonts/proxima-nova/ProximaNova-Xbold-webfont.woff') format('woff'),
63 | url('/fonts/proxima-nova/ProximaNova-Xbold-webfont.ttf') format('truetype'),
64 | url('/fonts/proxima-nova/ProximaNova-Xbold-webfont.svg#ywftsvg') format('svg');
65 | font-weight: 700;
66 | font-style: normal;
67 | }
68 |
69 | @font-face {
70 | font-family: 'Proxima Nova';
71 | src: url('/fonts/proxima-nova/ProximaNova-Black-webfont.eot');
72 | src: url('/fonts/proxima-nova/ProximaNova-Black-webfont.eot?#iefix') format('embedded-opentype'),
73 | url('/fonts/proxima-nova/ProximaNova-Black-webfont.woff') format('woff'),
74 | url('/fonts/proxima-nova/ProximaNova-Black-webfont.ttf') format('truetype'),
75 | url('/fonts/proxima-nova/ProximaNova-Black-webfont.svg#ywftsvg') format('svg');
76 | font-weight: 800;
77 | font-style: normal;
78 | }
79 |
80 | /* Entypo */
81 |
82 | @font-face {
83 | font-family: 'Entypo';
84 | src: url('/fonts/entypo/entypo.eot');
85 | src: url('/fonts/entypo/entypo.eot?#iefix') format('embedded-opentype'),
86 | url('/fonts/entypo/entypo.woff') format('woff'),
87 | url('/fonts/entypo/entypo.ttf') format('truetype'),
88 | url('/fonts/entypo/entypo.svg#ywftsvg') format('svg');
89 | font-weight: normal;
90 | font-style: normal;
91 | }
92 |
93 | /* Entypo Social */
94 |
95 | @font-face {
96 | font-family: 'Entypo Social';
97 | src: url('/fonts/entypo-social/entypo-social.eot');
98 | src: url('/fonts/entypo-social/entypo-social.eot?#iefix') format('embedded-opentype'),
99 | url('/fonts/entypo-social/entypo-social.woff') format('woff'),
100 | url('/fonts/entypo-social/entypo-social.ttf') format('truetype'),
101 | url('/fonts/entypo-social/entypo-social.svg#ywftsvg') format('svg');
102 | font-weight: normal;
103 | font-style: normal;
104 | }
105 |
--------------------------------------------------------------------------------
/src/view.coffee:
--------------------------------------------------------------------------------
1 | # Rivets.View
2 | # -----------
3 |
4 | # A collection of bindings built from a set of parent nodes.
5 | class Rivets.View
6 | # The DOM elements and the model objects for binding are passed into the
7 | # constructor along with any local options that should be used throughout the
8 | # context of the view and it's bindings.
9 | constructor: (@els, @models, options = {}) ->
10 | @els = [@els] unless (@els.jquery or @els instanceof Array)
11 |
12 | for option in Rivets.extensions
13 | @[option] = {}
14 | @[option][k] = v for k, v of options[option] if options[option]
15 | @[option][k] ?= v for k, v of Rivets.public[option]
16 |
17 | for option in Rivets.options
18 | @[option] = options[option] ? Rivets.public[option]
19 |
20 | @build()
21 |
22 | options: =>
23 | options = {}
24 |
25 | for option in Rivets.extensions.concat Rivets.options
26 | options[option] = @[option]
27 |
28 | options
29 |
30 | # Regular expression used to match binding attributes.
31 | bindingRegExp: =>
32 | new RegExp "^#{@prefix}-"
33 |
34 | buildBinding: (binding, node, type, declaration) =>
35 | options = {}
36 |
37 | pipes = (pipe.trim() for pipe in declaration.match /((?:'[^']*')*(?:(?:[^\|']*(?:'[^']*')+[^\|']*)+|[^\|]+))|^$/g)
38 | context = (ctx.trim() for ctx in pipes.shift().split '<')
39 | keypath = context.shift()
40 |
41 | options.formatters = pipes
42 |
43 | if dependencies = context.shift()
44 | options.dependencies = dependencies.split /\s+/
45 |
46 | @bindings.push new Rivets[binding] @, node, type, keypath, options
47 |
48 | # Parses the DOM tree and builds `Rivets.Binding` instances for every matched
49 | # binding declaration.
50 | build: =>
51 | @bindings = []
52 |
53 | parse = (node) =>
54 | if node.nodeType is 3
55 | parser = Rivets.TextTemplateParser
56 |
57 | if delimiters = @templateDelimiters
58 | if (tokens = parser.parse(node.data, delimiters)).length
59 | unless tokens.length is 1 and tokens[0].type is parser.types.text
60 | for token in tokens
61 | text = document.createTextNode token.value
62 | node.parentNode.insertBefore text, node
63 |
64 | if token.type is 1
65 | @buildBinding 'TextBinding', text, null, token.value
66 | node.parentNode.removeChild node
67 | else if node.nodeType is 1
68 | block = @traverse node
69 |
70 | unless block
71 | parse childNode for childNode in (n for n in node.childNodes)
72 | return
73 |
74 | parse el for el in @els
75 |
76 | @bindings.sort (a, b) ->
77 | (b.binder?.priority or 0) - (a.binder?.priority or 0)
78 |
79 | return
80 |
81 | traverse: (node) =>
82 | bindingRegExp = @bindingRegExp()
83 | block = node.nodeName is 'SCRIPT' or node.nodeName is 'STYLE'
84 |
85 | for attribute in node.attributes
86 | if bindingRegExp.test attribute.name
87 | type = attribute.name.replace bindingRegExp, ''
88 |
89 | unless binder = @binders[type]
90 | for identifier, value of @binders
91 | if identifier isnt '*' and identifier.indexOf('*') isnt -1
92 | regexp = new RegExp "^#{identifier.replace(/\*/g, '.+')}$"
93 | if regexp.test type
94 | binder = value
95 |
96 | binder or= @binders['*']
97 |
98 | if binder.block
99 | block = true
100 | attributes = [attribute]
101 |
102 | for attribute in attributes or node.attributes
103 | if bindingRegExp.test attribute.name
104 | type = attribute.name.replace bindingRegExp, ''
105 | @buildBinding 'Binding', node, type, attribute.value
106 |
107 | unless block
108 | type = node.nodeName.toLowerCase()
109 |
110 | if @components[type] and not node._bound
111 | @bindings.push new Rivets.ComponentBinding @, node, type
112 | block = true
113 |
114 | block
115 |
116 | # Returns an array of bindings where the supplied function evaluates to true.
117 | select: (fn) =>
118 | binding for binding in @bindings when fn binding
119 |
120 | # Binds all of the current bindings for this view.
121 | bind: =>
122 | binding.bind() for binding in @bindings
123 | return
124 |
125 | # Unbinds all of the current bindings for this view.
126 | unbind: =>
127 | binding.unbind() for binding in @bindings
128 | return
129 |
130 | # Syncs up the view with the model by running the routines on all bindings.
131 | sync: =>
132 | binding.sync?() for binding in @bindings
133 | return
134 |
135 | # Publishes the input values from the view back to the model (reverse sync).
136 | publish: =>
137 | binding.publish() for binding in @select (b) -> b.binder?.publishes
138 | return
139 |
140 | # Updates the view's models along with any affected bindings.
141 | update: (models = {}) =>
142 | @models[key] = model for key, model of models
143 | binding.update? models for binding in @bindings
144 | return
145 |
--------------------------------------------------------------------------------
/docs/css/screen.styl:
--------------------------------------------------------------------------------
1 | $color = #3f86e4
2 |
3 | body
4 | font-family "Proxima Nova", serif
5 | font-size 16px
6 | font-weight 400
7 | line-height 1.5
8 | text-rendering optimizeLegibility
9 | color #747a7e
10 |
11 | h1, h2, h3, h4, h5, h6
12 | font-family "Proxima Nova", serif
13 | font-weight 400
14 | color #545a5e
15 | margin 2em 0 1em
16 |
17 | article
18 | h2
19 | font-size 38px
20 |
21 | &:first-child
22 | margin-top 0
23 |
24 | h3
25 | font-size 22px
26 |
27 | p, pre
28 | margin 16px 0
29 |
30 | blockquote
31 | border none
32 | position relative
33 |
34 | &:before
35 | content "\201C"
36 | font-size 84px
37 | color #DADEDF
38 | position absolute
39 | top -20px
40 | left 0
41 |
42 | p
43 | margin 0 0 0 1.5em
44 | font-size inherit
45 |
46 | p > code, em > code
47 | background-color inherit
48 | color #2B3E4E
49 |
50 | pre
51 | border none
52 | border-radius 0
53 | font-size 13px
54 | padding 2em
55 |
56 | code
57 | font-size 12px
58 |
59 | i
60 | font-family "Entypo"
61 | font-style normal
62 |
63 | &.social
64 | font-family "Entypo Social"
65 |
66 | .btn
67 | border-radius 0
68 |
69 | i
70 | font-size 38px
71 | line-height 0
72 | position relative
73 | top 4px
74 | right 10px
75 |
76 | blockquote
77 | background-color white
78 | border-color #e0e4e5
79 |
80 | img.graphic
81 | opacity 0.1
82 |
83 | .logotype
84 | display inline-block
85 | color inherit
86 | letter-spacing 3px
87 | font-weight 400
88 | border 2px solid
89 | padding 10px 9px 8px 11px
90 |
91 | &.sg
92 | font-size 11px
93 | font-weight 500
94 | padding 8px 6px 6px 8px
95 | position relative
96 | top -2px
97 | margin-left 8px
98 | color #89a
99 |
100 | a, a:hover
101 | color inherit
102 | text-decoration none
103 |
104 |
105 | // HEADER
106 |
107 | header
108 | background-color $color
109 | color white
110 |
111 | img
112 | height 50px
113 | margin 20px 0
114 | float left
115 |
116 | .logotype
117 | font-size 16px
118 | margin 30px 0
119 |
120 | .center
121 | text-align center
122 |
123 | .right
124 | text-align right
125 |
126 | li
127 | display inline-block
128 | font-weight 400
129 | margin 40px 0 0 20px
130 |
131 | &:first-child
132 | margin-left 0
133 |
134 | a
135 | color: inherit
136 |
137 | i#hamburger
138 | cursor pointer
139 | font-size 68px
140 |
141 | section.intro
142 | text-align center
143 | padding 60px 0 80px
144 | background-color $color
145 | color: white
146 |
147 | img
148 | height 70px
149 |
150 | .blurb
151 | margin 0 auto 20px
152 | font-weight 200
153 | font-size 32px
154 | max-width 800px
155 |
156 | .btn + .btn
157 | margin-left 5px
158 |
159 | section.highlights
160 | padding: 40px 0 0
161 |
162 | span
163 | font-family monospace
164 | font-size: 14px
165 |
166 | .highlighted
167 | background-color #F0F2F5
168 | padding 2px 6px 3px
169 |
170 | section.using
171 | padding 40px 0
172 | text-align center
173 |
174 | a
175 | opacity 0.75
176 | -webkit-transition all 0.2s
177 | transition all 0.2s
178 |
179 | &:hover
180 | opacity 1
181 |
182 | img
183 | max-height 60px
184 | margin 50px 30px
185 |
186 | section.author
187 | text-align center
188 | background-color #f0f2f5
189 |
190 | h2
191 | font-weight 300
192 | font-size 36px
193 |
194 | img
195 | margin 40px 0 20px
196 | width 200px
197 | height 200px
198 | border-radius 500px
199 |
200 | a
201 | font-size: 46px
202 | padding 0 5px
203 | position relative
204 | bottom 155px
205 | color white
206 | transition all .2s
207 |
208 | &:hover
209 | text-decoration none
210 | color $color
211 |
212 | section.docs
213 | margin 80px 0 40px
214 |
215 | section
216 | .separator
217 | text-align center
218 | border-top 2px solid #eee
219 | margin 40px 0 -30px
220 | letter-spacing 1px
221 |
222 | h5
223 | position relative
224 | top -36px
225 | display inline-block
226 | padding 0 1em
227 | background-color white
228 | font-weight 500
229 |
230 | nav
231 | text-align right
232 |
233 | &.affix
234 | top 40px
235 |
236 | ul
237 | list-style none
238 | margin 0
239 |
240 | #nav
241 | .nav
242 | width 200px
243 |
244 | a
245 | padding inherit
246 | display inline
247 | color #919E9F
248 |
249 | &:hover
250 | text-decoration underline
251 | background-color inherit
252 |
253 | > .nav > li
254 | > a
255 | color #444e4e
256 |
257 | ul
258 | display none
259 |
260 | li.active
261 | ul
262 | display block
263 |
264 | > a
265 | color $color
266 |
267 | strong
268 | font-weight 500
269 |
270 | .btn
271 | padding 1em 1.5em
272 | font-weight 400
273 | font-size 13px
274 |
275 | .btn-clear
276 | padding 1.5em 6em
277 | border none
278 | color white
279 | background-color darken(desaturate($color, 15), 10)
280 | transition all 0.2s
281 |
282 | .btn-clear:hover
283 | background-color darken(desaturate($color, 10), 15)
284 | color white
285 |
286 | .btn-primary
287 | background-color #96c0c0
288 | border-color #96c0c0
289 |
290 | .btn-primary:hover,
291 | .btn-primary:focus,
292 | .btn-primary:active
293 | background-color #86baba
294 | border-color #86baba
295 |
296 | a
297 | color $color
298 |
299 | a:hover
300 | color $color
301 | text-decoration underline
302 |
303 | .check-list
304 | list-style none
305 | padding-left 1em
306 |
307 | .check-list li:before
308 | content "\2713\0020"
309 | padding-right 0.5em
310 |
--------------------------------------------------------------------------------
/CHANGELOG.md:
--------------------------------------------------------------------------------
1 | # 0.9.6
2 |
3 | **No changes (version bump due to error in publishing 0.9.5)**
4 |
5 | # 0.9.5
6 |
7 | ### Changes
8 |
9 | - Use global object `$` (jQuery or jQuery alternative) if available, fixing [#646](https://github.com/mikeric/rivets/issues/646)
10 |
11 | # 0.9.4
12 |
13 | ### Changes
14 |
15 | - Updated sightglass to `v0.2.6`, fixing [#572](https://github.com/mikeric/rivets/issues/572)
16 |
17 | # 0.9.2
18 |
19 | ### Changes
20 |
21 | - Fix issue when resetting a model [#644](https://github.com/mikeric/rivets/issues/644)
22 | - Fix publish function in two-way formatters [#649](https://github.com/mikeric/rivets/issues/649)
23 | - Fix array binding [#650](https://github.com/mikeric/rivets/issues/650)
24 | - Fix observers on prototype functions [#572](https://github.com/mikeric/rivets/issues/572)
25 |
26 | # 0.9.1
27 |
28 | ### Changes
29 |
30 | - Fix bug in expression with multiple strings [#620](https://github.com/mikeric/rivets/issues/620)
31 |
32 | # 0.9.0
33 |
34 | ### Changes
35 |
36 | - Fix binders which received 0 instead of undefined when HTML attributes were empty [#567](https://github.com/mikeric/rivets/issues/567)
37 | - Now functions are not executed by Rivets in expressions. To call the function you need to use the `call` formatter. See documentation [here](http://rivetsjs.com/docs/guide/#functions-call) [#571](https://github.com/mikeric/rivets/issues/571)
38 | - Support for nested rv-each with an index for each iteration. Index names can be configured, see documentation [here](http://rivetsjs.com/docs/guide/#usage-configuring) [#551](https://github.com/mikeric/rivets/issues/551)
39 | - Support for pipes in quoted arguments [#432](https://github.com/mikeric/rivets/issues/432)
40 | - Support for constant string in component HTML attributes [#478](https://github.com/mikeric/rivets/issues/478)
41 | - Fix rebind bug when a templated used nested `rv-if` binders [#611](https://github.com/mikeric/rivets/issues/611)
42 |
43 | ### Upgrading from 0.8
44 | - Since 0.9 Rivets will not execute functions by default. This will allow passing arguments to function with the `call` formatter.
45 |
46 | - Calling function in 0.8
47 | ```
48 | { item.myFunction }
49 | ```
50 | - Calling function in 0.9
51 | ```
52 | { item.myFunction | call}
53 | ```
54 | - Calling function in 0.9 with arguments
55 | ```
56 | { item.myFunction | call myArgument 'argument as string'}
57 | ```
58 |
59 | - You can force function executions to have your application work in `0.9` without using the `call` formatter. This is done with the configuration
60 | ```
61 | rivets.configure({
62 | // Since rivets 0.9 functions are not automatically executed in expressions. If you need backward compatibilty, set this parameter to true
63 | executeFunctions: true
64 | });
65 | ```
66 |
67 | - Using multiple indexes in nested `rv-each`. Since `0.9` rivets allows to have a specific index variable for each iteration.
68 | ```
69 |