Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

moved backbone stuff in own example and restored list example from be…

…fore backbone
  • Loading branch information...
commit d9a644f0deede5285c9b5e8050c8ca7cce829009 1 parent 8588865
▟ ▖▟ ▖ authored
92 example/backbone.coffee
View
@@ -0,0 +1,92 @@
+{ Template, List, jqueryify } = window.dynamictemplate
+
+# patch JQueryAdapter to use the list extension
+
+JQueryAdapter = jqueryify.Adapter
+jqueryify = (opts, tpl) ->
+ [tpl, opts] = [opts, null] unless tpl?
+ List.jqueryify new JQueryAdapter(tpl, opts)
+ return tpl
+
+# helpers
+
+EventHandler = (handler) ->
+ return (ev) ->
+ ev?.preventDefault?()
+ handler.apply(this, arguments)
+ no
+
+input = (tag, type, id, value, opts = {}) ->
+ tag.$input(_.extend({class:type, name:id, type, id, value}, opts))
+
+
+
+class BackboneExample extends Backbone.View
+
+ # embbeded template
+
+ template: (view) -> jqueryify new Template schema:5, ->
+ @$div class:'controls', ->
+
+ input this, 'button', "add", "view.model.add({value:}Math.random()})",
+ title:"add to bottom"
+
+ @$ul class:'list', ->
+ items = new List
+ view.model.on 'remove', (entry, collection, options) ->
+ items.remove(options.index)?.remove()
+ view.model.on 'add', (entry, collection, options) =>
+ items.insert options.index, @$li ->
+ @$input
+ type:'button'
+ class:"remove control"
+ 'data-cid':entry.cid
+ value:""
+ @$p "#{entry.get 'value'}"
+
+ # patch some backbone internals
+
+ make: -> # do nothing
+ delegateEvents: -> super if @$el?
+ undelegateEvents: -> super if @$el?
+
+ setElement: (element, delegate, callback) ->
+ return unless element?
+ @el = element
+ @el.ready =>
+ do @undelegateEvents if @$el
+ @$el = @el.jquery
+ callback?(@$el)
+ do @delegateEvents if delegate isnt off
+ this
+
+ render: (callback) ->
+ @setElement(@template(this), null, callback)
+
+ # user input handling
+
+ events:
+ 'click #add': "on_add"
+ 'click .remove': "on_remove"
+
+ on_add: EventHandler (ev) ->
+ @model.add value:"#{Math.random()}"
+
+ on_remove: EventHandler (ev) ->
+ if(entry = @model.getByCid($(ev.target).data('cid')))?
+ @model.remove(entry)
+
+
+# initialize
+
+$(document).ready ->
+ example = new BackboneExample
+ model:new Backbone.Collection
+ window.example = example
+ example.render ($el) ->
+ $('body').append($el)
+
+
+console.log 'coffeescript loaded.'
+
+
111 example/backbone.html
View
@@ -0,0 +1,111 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>dynamictemplate test</title>
+ <style>
+
+body {
+ background:white;
+ color: black;
+}
+
+a, input {
+ text-decoration:none;
+ color: #545454;
+ padding: 1px;
+ border: 1px solid transparent;
+ margin: 3px;
+ display:inline-block;
+ min-width: 1em;
+ text-align:center;
+ vertical-align:middle;
+ -webkit-transition: 300ms;
+ -moz-transition: 300ms;
+ -o-transition: 300ms;
+ transition: 300ms;
+ border-radius:0.3em;
+
+ background-size: 0% 0%;
+ background-position: center center;
+ background-repeat: no-repeat;
+ background-color:transparent;
+ background-image: -webkit-radial-gradient(circle contain, black, black 50%, transparent 50%, transparent);
+ background-image: -moz-radial-gradient(circle contain, black, black 50%, transparent 50%, transparent);
+ background-image: -o-radial-gradient(circle contain, black, black 50%, transparent 50%, transparent);
+ background-image: -ms-radial-gradient(circle contain, black, black 50%, transparent 50%, transparent);
+ background-image: radial-gradient(circle contain, black, black 50%, transparent 50%, transparent);
+}
+
+a:hover, a:focus, input:hover, input:focus {
+ background-size: 2222% 2222%;
+ border-color:transparent;
+ color:white;
+}
+
+input {
+ text-align:left;
+ padding: 3px;
+
+ -webkit-box-shadow: inset 0 0 3px rgba(0,0,0,0.42);
+ -moz-box-shadow: inset 0 0 3px rgba(0,0,0,0.42);
+ box-shadow: inset 0 0 3px rgba(0,0,0,0.42);
+}
+
+input[type="button"] {
+ cursor: pointer;
+ background-color:rgba(0,0,0,0.1);
+ -webkit-box-shadow: inset 0 0 3px rgba(255,255,255,0.42);
+ -moz-box-shadow: inset 0 0 3px rgba(255,255,255,0.42);
+ box-shadow: inset 0 0 3px rgba(255,255,255,0.42);
+}
+
+.list {
+ clear:both;
+ list-style-type: none;
+ border:1px dashed gray;
+ border-bottom:0px;
+ padding:0;
+}
+.list li {
+ list-style-type: none;
+ border-bottom:1px dashed gray;
+ padding:2px;
+ padding-left:20px;
+ margin:0;
+ min-height: 2em;
+}
+
+.control {
+ text-align:center;
+ border-radius:1.1em;
+ min-height: 1.3em;
+ min-width: 1.3em;
+ font-size:1.1em;
+ float:right;
+ padding:0;
+}
+
+input[type="number"] {
+ width: 3em;
+}
+
+
+ </style>
+ <script src="http://code.jquery.com/jquery-1.7.js"></script>
+ <script src="http://coffeescript.org/extras/coffee-script.js"></script>
+ <script src="http://documentcloud.github.com/underscore/underscore.js"></script>
+ <script src="http://documentcloud.github.com/backbone/backbone.js"></script>
+ <script src="../dt-list.browser.js"></script>
+ <script src="../dt-list.jquery.browser.js"></script>
+ <script src="../dt-jquery.browser.js"></script>
+ <script src="../dynamictemplate.browser.js"></script>
+ <script type="text/coffeescript" src="./backbone.coffee"></script>
+<!-- <script src="./list.js"></script> -->
+ </head>
+ <body>
+ <p>
+ Hit the buttons to add to the bottom and remove from top. <a href="./list.coffee">Source Code</a>
+ </p>
+ <!-- this is the space where the template will be -->
+ </body>
+</html>
116 example/list.coffee
View
@@ -1,6 +1,5 @@
{ Template, List, jqueryify } = window.dynamictemplate
-
-# patch JQueryAdapter to use the list extension
+EventEmitter = Template.__super__.constructor # i prefer nodejs eventemitter
JQueryAdapter = jqueryify.Adapter
jqueryify = (opts, tpl) ->
@@ -8,83 +7,58 @@ jqueryify = (opts, tpl) ->
List.jqueryify new JQueryAdapter(tpl, opts)
return tpl
-# helpers
-
-EventHandler = (handler) ->
- return (ev) ->
- ev?.preventDefault?()
- handler.apply(this, arguments)
- no
+# the templates
-input = (tag, type, id, value, opts = {}) ->
+input = (tag, type, id, value, opts) ->
tag.$input(_.extend({class:type, name:id, type, id, value}, opts))
+items = null # all our list entries
+tplapi = new EventEmitter # every other event system should be suitable as well
+list = jqueryify new Template schema:5, ->
+ @$div class:'controls', ->
+
+ input this, 'button', "add", "list.push(Math.random())",
+ title:"add to bottom"
+ input this, 'button', "remove", "list.shift()",
+ title:"remove from top"
+ @$br()
+ input this, 'button', "insert", "list.insert(i, text)",
+ title:"insert at position"
+ @span " where "
+ @$label for:'nmb', ->
+ @text " i="
+ input this, 'number','nmb', "0"
+ @$label for:'text', ->
+ @text " text="
+ input this, 'text', 'text', "", placeholder:"try me!"
+
+ @$ul class:'list', ->
+ items = new List
+ tplapi.on 'add', =>
+ console.log "add entry"
+ items.push @$li -> @$p "#{Math.random()}"
+ tplapi.on 'insert', (i, text) =>
+ console.log "insert entry"
+ items.insert i, @$li -> @$p "#{text}"
+ tplapi.on 'remove', ->
+ items.shift()?.remove()
+# initialize
-class ListExample extends Backbone.View
-
- # embbeded template
-
- template: (view) -> jqueryify new Template schema:5, ->
- @$div class:'controls', ->
-
- input this, 'button', "add", "view.model.add({value:}Math.random()})",
- title:"add to bottom"
-
- @$ul class:'list', ->
- items = new List
- view.model.on 'remove', (entry, collection, options) ->
- items.remove(options.index)?.remove()
- view.model.on 'add', (entry, collection, options) =>
- items.insert options.index, @$li ->
- @$input
- type:'button'
- class:"remove control"
- 'data-cid':entry.cid
- value:""
- @$p "#{entry.get 'value'}"
-
- # patch some backbone internals
-
- make: -> # do nothing
- delegateEvents: -> super if @$el?
- undelegateEvents: -> super if @$el?
-
- setElement: (element, delegate, callback) ->
- return unless element?
- @el = element
- @el.ready =>
- do @undelegateEvents if @$el
- @$el = @el.jquery
- callback?(@$el)
- do @delegateEvents if delegate isnt off
- this
-
- render: (callback) ->
- @setElement(@template(this), null, callback)
-
- # user input handling
-
- events:
- 'click #add': "on_add"
- 'click .remove': "on_remove"
-
- on_add: EventHandler (ev) ->
- @model.add value:"#{Math.random()}"
-
- on_remove: EventHandler (ev) ->
- if(entry = @model.getByCid($(ev.target).data('cid')))?
- @model.remove(entry)
+list.ready ->
+ window.test = list
+ $('body').append(list.jquery)
+ $('#add').live 'click', ->
+ tplapi.emit 'add' # tell the template to add a new entry
-# initialize
+ $('#remove').live 'click', ->
+ tplapi.emit 'remove'
-$(document).ready ->
- example = new ListExample
- model:new Backbone.Collection
- window.example = example
- example.render ($el) ->
- $('body').append($el)
+ $('#insert').live 'click', ->
+ i = parseInt($('#nmb').val())
+ return if i > items.length
+ tplapi.emit 'insert', i, $('#text').val()
console.log 'coffeescript loaded.'
78 example/list.html
View
@@ -4,97 +4,21 @@
<title>dynamictemplate test</title>
<style>
-body {
- background:white;
- color: black;
-}
-
-a, input {
- text-decoration:none;
- color: #545454;
- padding: 1px;
- border: 1px solid transparent;
- margin: 3px;
- display:inline-block;
- min-width: 1em;
- text-align:center;
- vertical-align:middle;
- -webkit-transition: 300ms;
- -moz-transition: 300ms;
- -o-transition: 300ms;
- transition: 300ms;
- border-radius:0.3em;
-
- background-size: 0% 0%;
- background-position: center center;
- background-repeat: no-repeat;
- background-color:transparent;
- background-image: -webkit-radial-gradient(circle contain, black, black 50%, transparent 50%, transparent);
- background-image: -moz-radial-gradient(circle contain, black, black 50%, transparent 50%, transparent);
- background-image: -o-radial-gradient(circle contain, black, black 50%, transparent 50%, transparent);
- background-image: -ms-radial-gradient(circle contain, black, black 50%, transparent 50%, transparent);
- background-image: radial-gradient(circle contain, black, black 50%, transparent 50%, transparent);
-}
-
-a:hover, a:focus, input:hover, input:focus {
- background-size: 2222% 2222%;
- border-color:transparent;
- color:white;
-}
-
-input {
- text-align:left;
- padding: 3px;
-
- -webkit-box-shadow: inset 0 0 3px rgba(0,0,0,0.42);
- -moz-box-shadow: inset 0 0 3px rgba(0,0,0,0.42);
- box-shadow: inset 0 0 3px rgba(0,0,0,0.42);
-}
-
-input[type="button"] {
- cursor: pointer;
- background-color:rgba(0,0,0,0.1);
- -webkit-box-shadow: inset 0 0 3px rgba(255,255,255,0.42);
- -moz-box-shadow: inset 0 0 3px rgba(255,255,255,0.42);
- box-shadow: inset 0 0 3px rgba(255,255,255,0.42);
-}
-
.list {
- clear:both;
list-style-type: none;
- border:1px dashed gray;
- border-bottom:0px;
- padding:0;
}
.list li {
- list-style-type: none;
- border-bottom:1px dashed gray;
- padding:2px;
- padding-left:20px;
- margin:0;
- min-height: 2em;
-}
-
-.control {
- text-align:center;
- border-radius:1.1em;
- min-height: 1.3em;
- min-width: 1.3em;
- font-size:1.1em;
- float:right;
- padding:0;
+ border:1px solid black;
}
input[type="number"] {
width: 3em;
}
-
</style>
<script src="http://code.jquery.com/jquery-1.7.js"></script>
<script src="http://coffeescript.org/extras/coffee-script.js"></script>
<script src="http://documentcloud.github.com/underscore/underscore.js"></script>
- <script src="http://documentcloud.github.com/backbone/backbone.js"></script>
<script src="../dt-list.browser.js"></script>
<script src="../dt-list.jquery.browser.js"></script>
<script src="../dt-jquery.browser.js"></script>
Please sign in to comment.
Something went wrong with that request. Please try again.