Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
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
@dodo authored
View
92 example/backbone.coffee
@@ -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.'
+
+
View
111 example/backbone.html
@@ -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>
View
116 example/list.coffee
@@ -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.'
View
78 example/list.html
@@ -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.