Browse files

sync list entries with backbone collection in backbone example

  • Loading branch information...
1 parent aaf4644 commit bbcfefa00cfa22f0a82dca563534ec3753bf2957 @dodo committed May 18, 2012
Showing with 58 additions and 2 deletions.
  1. +57 −2 example/backbone.coffee
  2. +1 −0 example/backbone.html
View
59 example/backbone.coffee
@@ -1,4 +1,14 @@
{ Template, List, jqueryify } = window.dynamictemplate
+{ isArray } = Array
+
+# use an even simpler equals comparator for adiff
+
+adiff = window.adiff({ # npm i adiff - https://github.com/dominictarr/adiff
+ equal: (a, b) ->
+ return no if a and not b
+ return no if isArray(a) and a.length isnt b.length
+ return a is b
+}, window.adiff)
# patch JQueryAdapter to use the list extension
@@ -19,6 +29,13 @@ EventHandler = (handler) ->
input = (tag, type, id, value, opts = {}) ->
tag.$input(_.extend({class:type, name:id, type, id, value}, opts))
+# different comparators
+
+ascending = (model) ->
+ parseFloat(model.get 'value')
+
+descending = (model) ->
+ - ascending(model)
class BackboneExample extends Backbone.View
@@ -28,15 +45,42 @@ class BackboneExample extends Backbone.View
template: (view) -> jqueryify new Template schema:5, ->
@$div class:'controls', ->
- input this, 'button', "add","view.model.add({value:Math.random()})",
- title:"add to bottom"
+ input this, 'button', "add", "view.model.add({value:Math.random()})"
+ input this, 'button', "desc", "", title:"descending"
+ input this, 'button', "asc", "", title:"ascending"
@$ul class:'list', ->
items = new List
view.model.on 'remove', (entry, collection, options) ->
items.remove(options.index)?.remove()
+ view.model.on 'reset', =>
+ # now its gonna get dirty!
+ bycid = {}
+ removed = []
+ old_models = []
+ # rebuild old collection state
+ for item in items
+ bycid[item.cid] = item
+ old_models.push view.model.getByCid(item.cid)
+ # apply diff patches on items list
+ for patch in adiff.diff(old_models, view.model.models)
+ # remove all items from dom before splicing them in
+ for i in [(patch[0]) ... (patch[0]+patch[1])]
+ items[i].remove(soft:yes)
+ removed.push items[i]
+ # replace models with items
+ for i in [2 ... patch.length]
+ patch[i] = bycid[patch[i].cid]
+ # apply patch!
+ items.splice.apply(items, patch)
+ # read all removed items - this only works in the assumption,
+ # that the collection doesn't change its size
+ for item in removed
+ @add(item)
+
view.model.on 'add', (entry, collection, options) =>
items.insert options.index, @$li ->
+ @cid = entry.cid # mark it to find its model again (on reset)
@$input
type:'button'
class:"remove control"
@@ -68,14 +112,25 @@ class BackboneExample extends Backbone.View
events:
'click #add': "on_add"
'click .remove': "on_remove"
+ 'click #desc': "on_desc"
+ 'click #asc': "on_asc"
on_add: EventHandler (ev) ->
@model.add value:"#{Math.random()}"
+ console.log @model.length
on_remove: EventHandler (ev) ->
if(entry = @model.getByCid($(ev.target).data('cid')))?
@model.remove(entry)
+ on_desc: EventHandler (ev) ->
+ @model.comparator = descending
+ @model.sort()
+
+ on_asc: EventHandler (ev) ->
+ @model.comparator = ascending
+ @model.sort()
+
# initialize
View
1 example/backbone.html
@@ -8,6 +8,7 @@
<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="../adiff.browser.js"></script>
<script src="../dt-list.browser.js"></script>
<script src="../dt-list.jquery.browser.js"></script>
<script src="../dt-jquery.browser.js"></script>

0 comments on commit bbcfefa

Please sign in to comment.