Source: ui/segmented-bar.info/sample/ui/main.reel/main.js

var Component = require("montage/ui/component").Component;

exports.Main = Component.specialize({
    handleAction: {
        value: function (event) {
            if (event.detail) {
                this.currentSegment = event.detail.get('data').label;
            }
        }
    },

    /**
     * Data can be any Object[] with any Object structure,
     * developer will pick right key by binding desired FRB expression.
     */
    data: {
        value: [
            {"region": "region1", "size": 10, "flag": true},
            {"region": "region2", "size": 10, "flag": true},
            {"region": "region3", "size": 10, "flag": true},
            {"region": "region4", "size": 10, "flag": true},
            {"region": "region5", "size": 10, "flag": true},
            {"region": "region6", "size": 50, "flag": true}
        ]
    },

    tree: {
        value: {
            region: "North America",
            size: 40,
            regions: [
                {
                    region: "Canada",
                    size: 20
                },
                {
                    region: "United States",
                    size: 20,
                    regions: [
                        {
                            region: "CA",
                            size: 40
                        },
                        {
                            region: "MN",
                            size: 30
                        }
                    ]
                }
            ]
        }
    }
});