{"action":"created","issue":{"url":"https://api.github.com/repos/ractivejs/ractive/issues/2061","labels_url":"https://api.github.com/repos/ractivejs/ractive/issues/2061/labels{/name}","comments_url":"https://api.github.com/repos/ractivejs/ractive/issues/2061/comments","events_url":"https://api.github.com/repos/ractivejs/ractive/issues/2061/events","html_url":"https://github.com/ractivejs/ractive/issues/2061","id":99428256,"number":2061,"title":"Inherited properties from removed component","user":{"login":"linde12","id":3235069,"avatar_url":"https://avatars.githubusercontent.com/u/3235069?v=3","gravatar_id":"","url":"https://api.github.com/users/linde12","html_url":"https://github.com/linde12","followers_url":"https://api.github.com/users/linde12/followers","following_url":"https://api.github.com/users/linde12/following{/other_user}","gists_url":"https://api.github.com/users/linde12/gists{/gist_id}","starred_url":"https://api.github.com/users/linde12/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/linde12/subscriptions","organizations_url":"https://api.github.com/users/linde12/orgs","repos_url":"https://api.github.com/users/linde12/repos","events_url":"https://api.github.com/users/linde12/events{/privacy}","received_events_url":"https://api.github.com/users/linde12/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":7,"created_at":"2015-08-06T12:56:31Z","updated_at":"2015-08-06T14:51:20Z","closed_at":null,"body":"Hello!\r\n\r\nThere is a problem with ractive not rerendering correctly when redefining an array in the components data.\r\n\r\nI have a List component and for each item in the people array a subcomponent(ListItem) will be rendered with that item as an argument. Something like this:\r\n```\r\n{{#each people}}\r\n  <ListItem person={{this}} />\r\n{{/each}}\r\n```\r\n\r\nIn my List i do something like this:\r\n```\r\nthis.people = [\r\n  {name: \"Oscar\", age:21},\r\n  {name: \"Stefan\", age: 19}\r\n];\r\n\r\nthis.set({people: people});\r\n```\r\n\r\nIn the ListItem for `Oscar` i set `eyecolor: 'blue'` on a button press, and thus the array looks like this:\r\n\r\n```\r\n[\r\n  {name: \"Oscar\", age:21, eyecolor: 'blue'},\r\n  {name: \"Stefan\", age: 19}\r\n]\r\n```\r\n\r\nThen i have some function to update my list in List. It redefines the people array to a completely new array containing only `{name: \"Stefan\", age: 19}`\r\n\r\nHowever now Stefan will also have the `eyecolor: blue` attribute. This is not expected, or at least wasn't expected by me. I think its bad behavior and took long time to debug.\r\n\r\nI'm sorry this is really confusing. It's really difficult to explain but i set up a demo for you:\r\nhttp://jsfiddle.net/mnzbjLq5/3/\r\n\r\nIf you press \"Set color attribute\" on the first item in the list and then press \"Refetch items\" you'll see the new item inherits that color attribute from the removed item."},"comment":{"url":"https://api.github.com/repos/ractivejs/ractive/issues/comments/128401649","html_url":"https://github.com/ractivejs/ractive/issues/2061#issuecomment-128401649","issue_url":"https://api.github.com/repos/ractivejs/ractive/issues/2061","id":128401649,"user":{"login":"martypdx","id":478864,"avatar_url":"https://avatars.githubusercontent.com/u/478864?v=3","gravatar_id":"","url":"https://api.github.com/users/martypdx","html_url":"https://github.com/martypdx","followers_url":"https://api.github.com/users/martypdx/followers","following_url":"https://api.github.com/users/martypdx/following{/other_user}","gists_url":"https://api.github.com/users/martypdx/gists{/gist_id}","starred_url":"https://api.github.com/users/martypdx/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/martypdx/subscriptions","organizations_url":"https://api.github.com/users/martypdx/orgs","repos_url":"https://api.github.com/users/martypdx/repos","events_url":"https://api.github.com/users/martypdx/events{/privacy}","received_events_url":"https://api.github.com/users/martypdx/received_events","type":"User","site_admin":false},"created_at":"2015-08-06T14:51:20Z","updated_at":"2015-08-06T14:51:20Z","body":"> i want my data bound to that specific ListItem component, not to its DOM\r\n\r\nI'm usually the same with complex components - I sometimes just don't want them to be reused. Just setting to an empty array first works and is most efficient way:\r\n\r\n```js\r\nthis.parent.set({items: [] });\r\nthis.parent.set({items: items});\r\n```\r\n\r\nYou can encapsulate this in the parent component with an observer and then it will happen automatically whenever list is set:\r\n\r\n```js\r\nthis.observe( 'items', items => {\r\n    this.set( 'items', [] );\r\n    this.set( 'items', items );\r\n}, { init: false } );\r\n```\r\n\r\nsee http://jsfiddle.net/mnzbjLq5/8/"}}