{"action":"created","issue":{"url":"https://api.github.com/repos/NativeScript/NativeScript/issues/1863","repository_url":"https://api.github.com/repos/NativeScript/NativeScript","labels_url":"https://api.github.com/repos/NativeScript/NativeScript/issues/1863/labels{/name}","comments_url":"https://api.github.com/repos/NativeScript/NativeScript/issues/1863/comments","events_url":"https://api.github.com/repos/NativeScript/NativeScript/issues/1863/events","html_url":"https://github.com/NativeScript/NativeScript/issues/1863","id":144273181,"number":1863,"title":"SegmentedBar selectedIndex binding does not work after setting new value","user":{"login":"MiroValchev","id":7013750,"avatar_url":"https://avatars.githubusercontent.com/u/7013750?v=3","gravatar_id":"","url":"https://api.github.com/users/MiroValchev","html_url":"https://github.com/MiroValchev","followers_url":"https://api.github.com/users/MiroValchev/followers","following_url":"https://api.github.com/users/MiroValchev/following{/other_user}","gists_url":"https://api.github.com/users/MiroValchev/gists{/gist_id}","starred_url":"https://api.github.com/users/MiroValchev/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/MiroValchev/subscriptions","organizations_url":"https://api.github.com/users/MiroValchev/orgs","repos_url":"https://api.github.com/users/MiroValchev/repos","events_url":"https://api.github.com/users/MiroValchev/events{/privacy}","received_events_url":"https://api.github.com/users/MiroValchev/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":{"login":"tsonevn","id":17448734,"avatar_url":"https://avatars.githubusercontent.com/u/17448734?v=3","gravatar_id":"","url":"https://api.github.com/users/tsonevn","html_url":"https://github.com/tsonevn","followers_url":"https://api.github.com/users/tsonevn/followers","following_url":"https://api.github.com/users/tsonevn/following{/other_user}","gists_url":"https://api.github.com/users/tsonevn/gists{/gist_id}","starred_url":"https://api.github.com/users/tsonevn/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/tsonevn/subscriptions","organizations_url":"https://api.github.com/users/tsonevn/orgs","repos_url":"https://api.github.com/users/tsonevn/repos","events_url":"https://api.github.com/users/tsonevn/events{/privacy}","received_events_url":"https://api.github.com/users/tsonevn/received_events","type":"User","site_admin":false},"milestone":null,"comments":6,"created_at":"2016-03-29T13:57:57Z","updated_at":"2016-04-05T13:12:21Z","closed_at":null,"body":"Really strange one (NativeScript 1.6, haven't tested yet on 1.7):\r\n\r\n`<SegmentedBar selectedIndexChanged=\"{{ test1 }}\" selectedIndex=\"{{ selectedDay.sex }}\">\r\n            <SegmentedBar.items>\r\n                <SegmentedBarItem title=\"No\" />\r\n                <SegmentedBarItem title=\"Unprotected\" />\r\n                <SegmentedBarItem title=\"Protected\" />\r\n            </SegmentedBar.items>\r\n        </SegmentedBar>`\r\n\r\nThe first time it works just fine. What I do is bind to the selected day from a calendar component.\r\n//js1\r\nconsole.log(day.sex);\r\nthis.set(\"selectedDay\", day);\r\n\r\n`public test1(args: any): void {\r\n//js2\r\n        console.log(args.newIndex + \" - \" + this.selectedDay.sex);        \r\n    }`\r\n\r\nJS1: 1\r\n//tapping the different segmentBarItems\r\nJS2: 1 - 1\r\nJS2: 0 - 0\r\nJS2: 2 - 2\r\n\r\nNext I choose a new day.\r\nJS1: 0\r\nJS2: 0 - 0\r\nJS2: 1 - 0\r\nJS2: 2 - 0\r\n\r\nAs you can see selectedIndex binding is no longer updating the selectedDay.sex value."},"comment":{"url":"https://api.github.com/repos/NativeScript/NativeScript/issues/comments/205796375","html_url":"https://github.com/NativeScript/NativeScript/issues/1863#issuecomment-205796375","issue_url":"https://api.github.com/repos/NativeScript/NativeScript/issues/1863","id":205796375,"user":{"login":"tsonevn","id":17448734,"avatar_url":"https://avatars.githubusercontent.com/u/17448734?v=3","gravatar_id":"","url":"https://api.github.com/users/tsonevn","html_url":"https://github.com/tsonevn","followers_url":"https://api.github.com/users/tsonevn/followers","following_url":"https://api.github.com/users/tsonevn/following{/other_user}","gists_url":"https://api.github.com/users/tsonevn/gists{/gist_id}","starred_url":"https://api.github.com/users/tsonevn/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/tsonevn/subscriptions","organizations_url":"https://api.github.com/users/tsonevn/orgs","repos_url":"https://api.github.com/users/tsonevn/repos","events_url":"https://api.github.com/users/tsonevn/events{/privacy}","received_events_url":"https://api.github.com/users/tsonevn/received_events","type":"User","site_admin":false},"created_at":"2016-04-05T13:12:21Z","updated_at":"2016-04-05T13:12:21Z","body":"Hi @MiroValchev, \r\n\r\nI reviewed your code and found that problem is due to incorrect handling of property change event. \r\nI've made some changes. To address the problem, review the code below.\r\n\r\ncalendar.ts\r\n```\r\nimport calendarModule = require(\"nativescript-telerik-ui-pro/calendar\");\r\nimport {Observable, EventData} from \"data/observable\";\r\nimport {Log} from \"../models/log\";\r\nimport {Day} from \"../models/day\";\r\nimport moment = require(\"moment\");\r\nimport frames = require (\"ui/frame\");\r\n\r\nexport class CalendarViewModel extends Observable {\r\n    constructor() {\r\n        super();                \r\n    }\r\n\r\n    public logs: Array<Log>;       \r\n    public selectionMode: string;\r\n    public events: Array<calendarModule.CalendarEvent>;            \r\n    public selectedDay: Day;\r\n    \r\n    private _selectedIndex:number;    \r\n    \r\n    public loadCalendar(): void {\r\n        this.set(\"selectionMode\", calendarModule.CalendarSelectionMode.Single);\r\n        this.setEvents();\r\n        this.daySelected({ args: moment().startOf('day') });                    \r\n    }    \r\n    \r\n    private setEvents(): void {        \r\n        var events: Array<calendarModule.CalendarEvent> = [];\r\n\r\n        var logs: Array<Log> = [];        \r\n        for (var j = 0; j < 28; j++) {           \r\n            if (Math.floor((Math.random() * 2) + 1) == 2) {\r\n                logs.push(new Log(moment().startOf('day').subtract(j, 'days'), 2));\r\n            }            \r\n        }                \r\n        this.logs = logs;\r\n\r\n        for (var log of logs) {\r\n            events.push(log.getEvent());\r\n        }\r\n                \r\n        this.set(\"events\", events);\r\n    }\r\n    \r\n    public daySelected(args: any): void {        \r\n        var date: moment.Moment = moment(args.date);                            \r\n        var day: Day = new Day();\r\n        day.date = date;\r\n        \r\n        var logs: Array<Log> = this.logs.filter(function(l) {\r\n            return (l.isDateInLog(date));\r\n        });\r\n\r\n        day.sex = 0;\r\n        logs.forEach(log => {\r\n            day.sex = log.sex;\r\n        });\r\n        \r\n        this.selectedDay = day;\r\n        this.selectedIndex = day.sex;        \r\n    }\r\n\r\n    public sexSelected(args: any): void {        \r\n        console.log(\"Args.newIndes: \" + args.newIndex + \" - selectedDay.sex: \" + this.selectedDay.sex);\r\n    }  \r\n    \r\n    public get selectedIndex():number{\r\n        return this._selectedIndex;\r\n    }  \r\n    public set selectedIndex(arg:number){\r\n        this._selectedIndex = arg;\r\n        this.selectedDay.sex = this._selectedIndex;\r\n        super.notify({ object: this, eventName: Observable.propertyChangeEvent, propertyName: \"selectedIndex\", value: arg });\r\n    }      \r\n}\r\n\r\nexport var vm: CalendarViewModel = new CalendarViewModel();\r\n```\r\n\r\ncalendar.xml\r\n\r\n```\r\n<Page xmlns=\"http://schemas.nativescript.org/tns.xsd\" \r\n      xmlns:rc=\"nativescript-telerik-ui-pro/calendar\"\r\n      xmlns:lv=\"nativescript-telerik-ui-pro/listview\"\r\n      loaded=\"pageLoaded\"\r\n      navigatingFrom=\"navigatingFrom\">\r\n  <GridLayout rows=\"auto, *, 200\">    \r\n      <rc:RadCalendar id=\"calendar\"\r\n                      row=\"1\"      \r\n                      eventSource=\"{{ events }}\"                      \r\n                      selectionMode=\"{{ selectionMode }}\"\r\n                      maxDate=\"{{ maxDate }}\"\r\n                      dateSelected=\"{{ daySelected }}\"\r\n                      dateDeselected=\"{{ dayDeselected }}\"/>\r\n      <StackLayout row=\"2\">      \r\n        <SegmentedBar selectedIndexChanged=\"{{ sexSelected }}\" selectedIndex=\"{{ selectedIndex }}\">\r\n            <SegmentedBar.items>\r\n                <SegmentedBarItem title=\"No\" />\r\n                <SegmentedBarItem title=\"Unprotected\" />\r\n                <SegmentedBarItem title=\"Protected\" />\r\n            </SegmentedBar.items>\r\n        </SegmentedBar>            \r\n      </StackLayout>\r\n  </GridLayout>\r\n</Page>\r\n```\r\nI hope this is applicable for you.\r\nKind regards"}}