{"action":"created","issue":{"url":"https://api.github.com/repos/frankdiox/OnsenUI-Material-Tabbar/issues/1","repository_url":"https://api.github.com/repos/frankdiox/OnsenUI-Material-Tabbar","labels_url":"https://api.github.com/repos/frankdiox/OnsenUI-Material-Tabbar/issues/1/labels{/name}","comments_url":"https://api.github.com/repos/frankdiox/OnsenUI-Material-Tabbar/issues/1/comments","events_url":"https://api.github.com/repos/frankdiox/OnsenUI-Material-Tabbar/issues/1/events","html_url":"https://github.com/frankdiox/OnsenUI-Material-Tabbar/issues/1","id":144172837,"number":1,"title":"OnsenUI with emberjs","user":{"login":"kirantpatil","id":1178055,"avatar_url":"https://avatars.githubusercontent.com/u/1178055?v=3","gravatar_id":"","url":"https://api.github.com/users/kirantpatil","html_url":"https://github.com/kirantpatil","followers_url":"https://api.github.com/users/kirantpatil/followers","following_url":"https://api.github.com/users/kirantpatil/following{/other_user}","gists_url":"https://api.github.com/users/kirantpatil/gists{/gist_id}","starred_url":"https://api.github.com/users/kirantpatil/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/kirantpatil/subscriptions","organizations_url":"https://api.github.com/users/kirantpatil/orgs","repos_url":"https://api.github.com/users/kirantpatil/repos","events_url":"https://api.github.com/users/kirantpatil/events{/privacy}","received_events_url":"https://api.github.com/users/kirantpatil/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":5,"created_at":"2016-03-29T06:42:45Z","updated_at":"2016-04-15T11:18:43Z","closed_at":null,"body":"Hi @frankdiox \r\n\r\nI would like to see an app with onsenui and ember.\r\n\r\nPlease point me to the app if you have hosted one or if someone is using.\r\n\r\nThanks."},"comment":{"url":"https://api.github.com/repos/frankdiox/OnsenUI-Material-Tabbar/issues/comments/210421776","html_url":"https://github.com/frankdiox/OnsenUI-Material-Tabbar/issues/1#issuecomment-210421776","issue_url":"https://api.github.com/repos/frankdiox/OnsenUI-Material-Tabbar/issues/1","id":210421776,"user":{"login":"kirantpatil","id":1178055,"avatar_url":"https://avatars.githubusercontent.com/u/1178055?v=3","gravatar_id":"","url":"https://api.github.com/users/kirantpatil","html_url":"https://github.com/kirantpatil","followers_url":"https://api.github.com/users/kirantpatil/followers","following_url":"https://api.github.com/users/kirantpatil/following{/other_user}","gists_url":"https://api.github.com/users/kirantpatil/gists{/gist_id}","starred_url":"https://api.github.com/users/kirantpatil/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/kirantpatil/subscriptions","organizations_url":"https://api.github.com/users/kirantpatil/orgs","repos_url":"https://api.github.com/users/kirantpatil/repos","events_url":"https://api.github.com/users/kirantpatil/events{/privacy}","received_events_url":"https://api.github.com/users/kirantpatil/received_events","type":"User","site_admin":false},"created_at":"2016-04-15T11:18:43Z","updated_at":"2016-04-15T11:18:43Z","body":"Finally I could make it work in ember as below.\r\n\r\n1. Install ember-cli 2.4.x\r\n2. Create new project, \"ember new emberonsen\"\r\n3. $ cd emberonsen\r\n4. vi bower.json and add below line to dependenices section\r\n    \"onsenui\": \"2.0.0-beta.9\"\r\n5. $ bower install <= this command will install onsenui under bower_components directory\r\n6. We need to import external js and css to ember by mentioning each file at ember-cli-build.js file as below.\r\n\r\napp.import('bower_components/onsenui/css/onsen-css-components.css');\r\n  app.import('bower_components/onsenui/css/onsen-css-components-blue-basic-theme.css');\r\n  app.import('bower_components/onsenui/css/onsen-css-components-blue-theme.css');\r\n  app.import('bower_components/onsenui/css/onsen-css-components-dark-theme.css');\r\n  app.import('bower_components/onsenui/css/onsen-css-components-default.css');\r\n  app.import('bower_components/onsenui/css/onsen-css-components-purple-theme.css');\r\n  app.import('bower_components/onsenui/css/onsen-css-components-sunshine-theme.css');\r\n  app.import('bower_components/onsenui/css/material-design-iconic-font/css/material-design-iconic-font.css');\r\n  app.import('bower_components/onsenui/css/ionicons/css/ionicons.css');\r\n  app.import('bower_components/onsenui/css/font_awesome/css/font-awesome.css');\r\n  app.import('bower_components/onsenui/css/material-design-iconic-font/fonts/Material-Design-Iconic-Font.eot');\r\n  app.import('bower_components/onsenui/css/material-design-iconic-font/fonts/Material-Design-Iconic-Font.svg');\r\n  app.import('bower_components/onsenui/css/material-design-iconic-font/fonts/Material-Design-Iconic-Font.ttf');\r\n  app.import('bower_components/onsenui/css/material-design-iconic-font/fonts/Material-Design-Iconic-Font.woff');\r\n  app.import('bower_components/onsenui/css/material-design-iconic-font/fonts/Material-Design-Iconic-Font.woff2');\r\n  app.import('bower_components/onsenui/css/ionicons/fonts/ionicons.eot');\r\n  app.import('bower_components/onsenui/css/ionicons/fonts/ionicons.svg');\r\n  app.import('bower_components/onsenui/css/ionicons/fonts/ionicons.ttf');\r\n  app.import('bower_components/onsenui/css/ionicons/fonts/ionicons.woff');\r\n  app.import('bower_components/onsenui/css/font_awesome/fonts/FontAwesome.otf');\r\n  app.import('bower_components/onsenui/css/font_awesome/fonts/fontawesome-webfont.eot');\r\n  app.import('bower_components/onsenui/css/font_awesome/fonts/fontawesome-webfont.svg');\r\n  app.import('bower_components/onsenui/css/font_awesome/fonts/fontawesome-webfont.ttf');\r\n  app.import('bower_components/onsenui/css/font_awesome/fonts/fontawesome-webfont.woff');\r\n  app.import('bower_components/onsenui/css/font_awesome/fonts/fontawesome-webfont.woff2');\r\n  app.import('bower_components/onsenui/css/onsenui.css');\r\n  app.import('bower_components/onsenui/js/onsenui.js');\r\n  \r\n  return app.toTree();\r\n};\r\n\r\n7. Now add onsen components to app/templates/application.hbs file as below \r\n\r\n<ons-navigator title=\"Navigator\" var=\"myNavigator\">\r\n  <ons-page>\r\n<ons-button modifier=\"large--cta\">\r\n  Tap Me\r\n</ons-button>\r\n    <ons-toolbar>\r\n      <div class=\"center\">Basic List</div>\r\n    </ons-toolbar>\r\n    <ons-scroller>\r\n      <ons-list>\r\n        <ons-list-header>Numbers</ons-list-header>\r\n        <ons-list-item>One</ons-list-item>\r\n        <ons-list-item>Two</ons-list-item>\r\n        <ons-list-item>Three</ons-list-item>\r\n        <ons-list-item>Four</ons-list-item>\r\n        <ons-list-item>Five</ons-list-item>\r\n        <ons-list-item>Six</ons-list-item>\r\n        \r\n        <ons-list-header>Tappable Numbers</ons-list-header>\r\n        <ons-list-item modifier=\"tappable\">Tap Me</ons-list-item>\r\n        <ons-list-item modifier=\"tappable\">Tap Me</ons-list-item>\r\n        <ons-list-item modifier=\"tappable\">Tap Me</ons-list-item>\r\n        <ons-list-item modifier=\"tappable\">Tap Me</ons-list-item>\r\n        <ons-list-item modifier=\"tappable\">Tap Me</ons-list-item>\r\n        <ons-list-item modifier=\"tappable\">Tap Me</ons-list-item>\r\n      </ons-list>\r\n    </ons-scroller>\r\n  </ons-page>\r\n</ons-navigator>\r\n\r\n8. $ ember s\r\n9. Open browser with URL: localhost:4200 , now browser displays the onsen components mentioned application.hbs file"}}