{"action":"closed","issue":{"url":"https://api.github.com/repos/mikeric/rivets/issues/439","labels_url":"https://api.github.com/repos/mikeric/rivets/issues/439/labels{/name}","comments_url":"https://api.github.com/repos/mikeric/rivets/issues/439/comments","events_url":"https://api.github.com/repos/mikeric/rivets/issues/439/events","html_url":"https://github.com/mikeric/rivets/issues/439","id":54119540,"number":439,"title":"Each binder to not rebind all items when pop, shift, splice on collection. (question, not issue)","user":{"login":"Duder-onomy","id":1612785,"avatar_url":"https://avatars.githubusercontent.com/u/1612785?v=3","gravatar_id":"","url":"https://api.github.com/users/Duder-onomy","html_url":"https://github.com/Duder-onomy","followers_url":"https://api.github.com/users/Duder-onomy/followers","following_url":"https://api.github.com/users/Duder-onomy/following{/other_user}","gists_url":"https://api.github.com/users/Duder-onomy/gists{/gist_id}","starred_url":"https://api.github.com/users/Duder-onomy/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/Duder-onomy/subscriptions","organizations_url":"https://api.github.com/users/Duder-onomy/orgs","repos_url":"https://api.github.com/users/Duder-onomy/repos","events_url":"https://api.github.com/users/Duder-onomy/events{/privacy}","received_events_url":"https://api.github.com/users/Duder-onomy/received_events","type":"User","site_admin":false},"labels":[],"state":"closed","locked":false,"assignee":null,"milestone":null,"comments":1,"created_at":"2015-01-12T22:56:14Z","updated_at":"2015-01-20T17:24:51Z","closed_at":"2015-01-20T17:24:51Z","body":"Hello, this is more of a question for some of the people more familiar with the rivets Source than I. \r\n\r\nI am attempting to re-implement the each binder.  This new each binder  will splice elements out of the DOM when the iterated collection has items spliced.\r\n\r\nCurrently, if you remove an item from the middle of your collection. The each binder will remove the last iterated element from the DOM.  Then rebind all the views.\r\n\r\nI have added the following failed tests to my Rivets fork: \r\n```javascript\r\nit(\"keeps the DOM elements that it creates in order when removing an item from the middle of the bound collection\", function() {\r\n        var view = rivets.bind(fragment, model);\r\n\r\n        Array.prototype.forEach.call(fragment.querySelectorAll('li'), function(el, index) {\r\n           el.setAttribute('originalOrder', index);\r\n        });\r\n\r\n        model.items.splice(1, 1); // remove the middle item.\r\n\r\n        Should(Array.prototype.map.call(fragment.querySelectorAll('li'), function(el, index) {\r\n           return el.getAttribute('originalOrder');\r\n        })).be.exactly([1, 3]);\r\n    });\r\n```\r\nFails, Expected [ 0, 1, 2 ] to be [ 1, 3 ].\r\n\r\nI have been working on this for a few short sessions now but do not see an easy way to accomplish this.\r\n\r\nI have been trying the following in the routine method of the each binder: \r\n```coffescript\r\n    if @iterated.length and @iterated.length > collection.length\r\n      console.log('something was removed from the collection');\r\n    \r\n    if @iterated.length and @iterated.length < collection.length\r\n      console.log('something was added to the collection');\r\n    \r\n    if @iterated.length and @iterated.length is collection.length\r\n      console.log('need to rebind the collection');\r\n      for model, index in collection\r\n        data = {index}\r\n        data[modelName] = model\r\n    \r\n        if @iterated[index].models[modelName] isnt model\r\n          @iterated[index].update data\r\n    \r\n    if not @iterated.length\r\n      console.log('original');\r\n      for model, index in collection\r\n        data = {index}\r\n        data[modelName] = model\r\n    \r\n        for key, model of @view.models\r\n          data[key] ?= model\r\n    \r\n        previous = if @iterated.length\r\n          @iterated[@iterated.length - 1].els[0]\r\n        else\r\n          @marker\r\n    \r\n        options = @view.options()\r\n        options.preloadData = true\r\n    \r\n        template = el.cloneNode true\r\n        view = new Rivets.View(template, data, options)\r\n        view.bind()\r\n        @iterated.push view\r\n    \r\n        @marker.parentNode.insertBefore template, previous.nextSibling\r\n```\r\n\r\nDoes anyone know of a good way to get this done? (sudo code is helpful)\r\nThe hard part is telling `which` item was removed from the collection so that you know `which` element to remove from @iterated.\r\nThanks\r\nGreg"}}