{"action":"created","issue":{"url":"https://api.github.com/repos/NativeScript/NativeScript/issues/5471","repository_url":"https://api.github.com/repos/NativeScript/NativeScript","labels_url":"https://api.github.com/repos/NativeScript/NativeScript/issues/5471/labels{/name}","comments_url":"https://api.github.com/repos/NativeScript/NativeScript/issues/5471/comments","events_url":"https://api.github.com/repos/NativeScript/NativeScript/issues/5471/events","html_url":"https://github.com/NativeScript/NativeScript/issues/5471","id":300545242,"number":5471,"title":"SegmentedBar items binding causing error on navigation","user":{"login":"NickIliev","id":18008302,"avatar_url":"https://avatars2.githubusercontent.com/u/18008302?v=4","gravatar_id":"","url":"https://api.github.com/users/NickIliev","html_url":"https://github.com/NickIliev","followers_url":"https://api.github.com/users/NickIliev/followers","following_url":"https://api.github.com/users/NickIliev/following{/other_user}","gists_url":"https://api.github.com/users/NickIliev/gists{/gist_id}","starred_url":"https://api.github.com/users/NickIliev/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/NickIliev/subscriptions","organizations_url":"https://api.github.com/users/NickIliev/orgs","repos_url":"https://api.github.com/users/NickIliev/repos","events_url":"https://api.github.com/users/NickIliev/events{/privacy}","received_events_url":"https://api.github.com/users/NickIliev/received_events","type":"User","site_admin":false},"labels":[{"id":203688365,"url":"https://api.github.com/repos/NativeScript/NativeScript/labels/backlog","name":"backlog","color":"ededed","default":false},{"id":203688366,"url":"https://api.github.com/repos/NativeScript/NativeScript/labels/severity:%20medium","name":"severity: medium","color":"ff9933","default":false}],"state":"closed","locked":false,"assignee":{"login":"vakrilov","id":4092076,"avatar_url":"https://avatars3.githubusercontent.com/u/4092076?v=4","gravatar_id":"","url":"https://api.github.com/users/vakrilov","html_url":"https://github.com/vakrilov","followers_url":"https://api.github.com/users/vakrilov/followers","following_url":"https://api.github.com/users/vakrilov/following{/other_user}","gists_url":"https://api.github.com/users/vakrilov/gists{/gist_id}","starred_url":"https://api.github.com/users/vakrilov/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/vakrilov/subscriptions","organizations_url":"https://api.github.com/users/vakrilov/orgs","repos_url":"https://api.github.com/users/vakrilov/repos","events_url":"https://api.github.com/users/vakrilov/events{/privacy}","received_events_url":"https://api.github.com/users/vakrilov/received_events","type":"User","site_admin":false},"assignees":[{"login":"vakrilov","id":4092076,"avatar_url":"https://avatars3.githubusercontent.com/u/4092076?v=4","gravatar_id":"","url":"https://api.github.com/users/vakrilov","html_url":"https://github.com/vakrilov","followers_url":"https://api.github.com/users/vakrilov/followers","following_url":"https://api.github.com/users/vakrilov/following{/other_user}","gists_url":"https://api.github.com/users/vakrilov/gists{/gist_id}","starred_url":"https://api.github.com/users/vakrilov/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/vakrilov/subscriptions","organizations_url":"https://api.github.com/users/vakrilov/orgs","repos_url":"https://api.github.com/users/vakrilov/repos","events_url":"https://api.github.com/users/vakrilov/events{/privacy}","received_events_url":"https://api.github.com/users/vakrilov/received_events","type":"User","site_admin":false},{"login":"NickIliev","id":18008302,"avatar_url":"https://avatars2.githubusercontent.com/u/18008302?v=4","gravatar_id":"","url":"https://api.github.com/users/NickIliev","html_url":"https://github.com/NickIliev","followers_url":"https://api.github.com/users/NickIliev/followers","following_url":"https://api.github.com/users/NickIliev/following{/other_user}","gists_url":"https://api.github.com/users/NickIliev/gists{/gist_id}","starred_url":"https://api.github.com/users/NickIliev/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/NickIliev/subscriptions","organizations_url":"https://api.github.com/users/NickIliev/orgs","repos_url":"https://api.github.com/users/NickIliev/repos","events_url":"https://api.github.com/users/NickIliev/events{/privacy}","received_events_url":"https://api.github.com/users/NickIliev/received_events","type":"User","site_admin":false}],"milestone":null,"comments":0,"created_at":"2018-02-27T09:07:19Z","updated_at":"2018-03-13T12:52:11Z","closed_at":"2018-03-13T12:52:11Z","author_association":"CONTRIBUTOR","body":"Using `SegmentedBar` created with binding to `items` property is causing the application to throw the following error on navigation (to the page with `SegmentedBar`)\r\n```\r\nERROR: Binding: Binding error while setting property items of SegmentedBar(75)@file:///app/home/home-page.xml:9:4;: Error: View already has a parent. View: SegmentedBarItem(2) Parent: SegmentedBar(10)@file:///app/home/home-page.xml:9:4;\r\n```\r\n\r\nSteps to reproduce:\r\n- use [this PlayGround demo](https://play.nativescript.org/?template=play-js&id=BoY0vw)\r\n- navigate from the page with a segmented bar to the new page and backward.\r\nResult - the SegmentedBar disappears after navigation and the app throws the error above.\r\n\r\nPartial workaround: move the assigning of binding context in `navigatingTo` event instead of `loaded` event - as a result, the SegmentedBar will load as expected but the error will still be thrown ([workaround Playground demo](https://play.nativescript.org/?template=play-js&id=BoY0vw&v=2)).\r\n\r\nReported via t.1153429 "},"comment":{"url":"https://api.github.com/repos/NativeScript/NativeScript/issues/comments/372654604","html_url":"https://github.com/NativeScript/NativeScript/issues/5471#issuecomment-372654604","issue_url":"https://api.github.com/repos/NativeScript/NativeScript/issues/5471","id":372654604,"user":{"login":"NickIliev","id":18008302,"avatar_url":"https://avatars2.githubusercontent.com/u/18008302?v=4","gravatar_id":"","url":"https://api.github.com/users/NickIliev","html_url":"https://github.com/NickIliev","followers_url":"https://api.github.com/users/NickIliev/followers","following_url":"https://api.github.com/users/NickIliev/following{/other_user}","gists_url":"https://api.github.com/users/NickIliev/gists{/gist_id}","starred_url":"https://api.github.com/users/NickIliev/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/NickIliev/subscriptions","organizations_url":"https://api.github.com/users/NickIliev/orgs","repos_url":"https://api.github.com/users/NickIliev/repos","events_url":"https://api.github.com/users/NickIliev/events{/privacy}","received_events_url":"https://api.github.com/users/NickIliev/received_events","type":"User","site_admin":false},"created_at":"2018-03-13T12:52:11Z","updated_at":"2018-03-13T12:52:11Z","author_association":"CONTRIBUTOR","body":"Follow up about the reasons for the issue above:\r\n\r\nThe reason for the issue to happen is that the view model used to create the SegmentedBarItems is statically created using Singelton pattern. In the same time our `SegmentedBatItem` is extending `ViewBase` and as a NativeScript limitation, all layouts that are extending ViewBase cannot be reused in different pages. \r\n\r\nSo when the user navigates from the `home-age` (with the static view model) to `new-page` and then navigates again to `home-page` (**not with back** but with **`topmost().navigate(\"home/home-page\");`** we have already created the SegmentedBarItems and they cannot be reused again.\r\n\r\nTo overcome this limitation we can assure that all layouts/controls that are extending ViewBase are created specifically for the page we are navigating to.\r\n\r\nFor example:\r\nin `home-page.ts`\r\n```\r\nvar homeViewModel = new HomeViewModel();\r\n\r\nfunction navigatingTo(args) {\r\n  var page = args.object;\r\n  var arr = [];\r\n\r\n  homeViewModel.titles.forEach(t => {\r\n    let item = new segmentedBarModule.SegmentedBarItem();\r\n    item.title = t;\r\n    arr.push(item); // create the SegmentedbarItem array \r\n  })\r\n\r\n  page.bindingContext = { model: homeViewModel, vm: arr } ; // pass the items for the specific page bindingContext \r\n}\r\nexports.navigatingTo = navigatingTo;\r\n```\r\n\r\nand in home-page.xml\r\n```\r\n<Page navigatingTo=\"navigatingTo\" class=\"page\" xmlns=\"http://www.nativescript.org/tns.xsd\">\r\n\t<ActionBar title=\"Home\" class=\"action-bar\">\r\n\t</ActionBar>\r\n\r\n\t<ScrollView>\r\n\t\t<StackLayout class=\"home-panel\">\r\n\t\t\t<Button text=\"Navigate to New Page\" tap=\"{{ model.onButtonTap }}\" class=\"m-20\"/>\r\n\t\t\t<SegmentedBar items=\"{{ vm }}\" selectedIndex=\"{{ model.selectedBarIndex }}\" />\r\n\t\t</StackLayout>\r\n\t</ScrollView>\r\n</Page>\r\n```"}}
{"actor":{"display_login":"NickIliev"}}