{"action":"created","issue":{"url":"https://api.github.com/repos/leeoniya/domvm/issues/90","repository_url":"https://api.github.com/repos/leeoniya/domvm","labels_url":"https://api.github.com/repos/leeoniya/domvm/issues/90/labels{/name}","comments_url":"https://api.github.com/repos/leeoniya/domvm/issues/90/comments","events_url":"https://api.github.com/repos/leeoniya/domvm/issues/90/events","html_url":"https://github.com/leeoniya/domvm/issues/90","id":164608548,"number":90,"title":"Maintaining view state","user":{"login":"Veid","id":538505,"avatar_url":"https://avatars.githubusercontent.com/u/538505?v=3","gravatar_id":"","url":"https://api.github.com/users/Veid","html_url":"https://github.com/Veid","followers_url":"https://api.github.com/users/Veid/followers","following_url":"https://api.github.com/users/Veid/following{/other_user}","gists_url":"https://api.github.com/users/Veid/gists{/gist_id}","starred_url":"https://api.github.com/users/Veid/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/Veid/subscriptions","organizations_url":"https://api.github.com/users/Veid/orgs","repos_url":"https://api.github.com/users/Veid/repos","events_url":"https://api.github.com/users/Veid/events{/privacy}","received_events_url":"https://api.github.com/users/Veid/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":4,"created_at":"2016-07-08T20:19:21Z","updated_at":"2016-07-08T22:56:43Z","closed_at":null,"body":"I have something like this:\r\n\r\n```js\r\nfunction RowView(vm, state) {\r\n\tvar w = domvm.watch().on(function() {\r\n\t\tvm.redraw();\r\n\t});\r\n\r\n\tvar c = w.prop('red');\r\n\r\n\treturn function() {\r\n\t\treturn [\"tr\", {\r\n\t\t\tonclick: flip,\r\n\t\t\tclass: c()\r\n\t\t}, state.text];\r\n\t};\r\n\r\n\tfunction flip() {\r\n\t\tif (c() === 'red') {\r\n\t\t\tc('blue');\r\n\t\t} else {\r\n\t\t\tc('red');\r\n\t\t}\r\n\t}\r\n}\r\n\r\nfunction BodyView(vm, state) {\r\n\treturn function() {\r\n\t\treturn [\"tbody\", [\r\n\t\t\tstate.displayItems.map(function(itemData) {\r\n\t\t\t\treturn [RowView, {\r\n\t\t\t\t\ttext : itemData.text,\r\n\t\t\t\t\t_key : itemData.key\r\n\t\t\t\t}];\r\n\r\n\t\t\t})\r\n\t\t]];\r\n\t}\r\n}\r\n\r\nfunction TableView(vm, state) {\r\n\treturn function() {\r\n\t\treturn [\"table\", [\r\n\t\t\t[BodyView, {\r\n\t\t\t\tdisplayItems : state.displayItems\r\n\t\t\t}]\r\n\t\t]];\r\n\t};\r\n}\r\n\r\nvar items = [\r\n\t{\r\n\t\ttext: 'one',\r\n\t\tkey : 1\r\n\t},\r\n\t{\r\n\t\ttext: 'two',\r\n\t\tkey : 2\r\n\t},\r\n];\r\n\r\nvar vm = domvm.view(TableView, {displayItems:items}).mount(document.body);\r\n```\r\n\r\nSo if I click the items, they toggle between red and blue. If I had a function that sorted the items then called `vm.redraw()`, `c` will get reset to red regardless of `_key` in `BodyView`. Where would you put this kind of state?\r\n\r\nAnother example might be a `tr` with some information and a button. You click the button and it can be in one of three possible states: `ready`, `in progress`, `done`. If you have a list of `n` items, you might have a few items with a `ready` button, a few `in progress`, and a few `done`. If sort the list, they would all get reset to `ready` -- using the method above.\r\n\r\nI would have thought, since I set the `_key` attribute that the node would be (reused??) and only the return function will execute?\r\n\r\nHow would you approach this?"},"comment":{"url":"https://api.github.com/repos/leeoniya/domvm/issues/comments/231491920","html_url":"https://github.com/leeoniya/domvm/issues/90#issuecomment-231491920","issue_url":"https://api.github.com/repos/leeoniya/domvm/issues/90","id":231491920,"user":{"login":"Veid","id":538505,"avatar_url":"https://avatars.githubusercontent.com/u/538505?v=3","gravatar_id":"","url":"https://api.github.com/users/Veid","html_url":"https://github.com/Veid","followers_url":"https://api.github.com/users/Veid/followers","following_url":"https://api.github.com/users/Veid/following{/other_user}","gists_url":"https://api.github.com/users/Veid/gists{/gist_id}","starred_url":"https://api.github.com/users/Veid/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/Veid/subscriptions","organizations_url":"https://api.github.com/users/Veid/orgs","repos_url":"https://api.github.com/users/Veid/repos","events_url":"https://api.github.com/users/Veid/events{/privacy}","received_events_url":"https://api.github.com/users/Veid/received_events","type":"User","site_admin":false},"created_at":"2016-07-08T22:56:43Z","updated_at":"2016-07-08T22:56:43Z","body":"@leeoniya \r\n\r\nThis is all tremendously helpful, thank you!\r\n\r\nAbout point two, \"if objects in `items` are persistent, they don't need to have keys...\". So if I wanted to implement sorting in the above example, e.g.\r\n\r\n`items = _.sortBy(items, 'text');`\r\n\r\nIf I was using my original, over-componentized  example, would I have to key both the `BodyView` and each individual `RowView`?"}}
{"actor":{"display_login":"Veid"}}