{{fullName}}
Data would go here...
https://github.com/coderberry/ember-ratchet-example
Instructions to creating a hybrid mobile app with EmberCLI and Ratchet
https://github.com/coderberry/ember-ratchet-example
Last synced: 10 months ago
JSON representation
Instructions to creating a hybrid mobile app with EmberCLI and Ratchet
- Host: GitHub
- URL: https://github.com/coderberry/ember-ratchet-example
- Owner: coderberry
- Created: 2014-06-26T22:01:58.000Z (almost 12 years ago)
- Default Branch: master
- Last Pushed: 2014-06-27T13:45:32.000Z (almost 12 years ago)
- Last Synced: 2025-04-28T11:22:57.629Z (about 1 year ago)
- Language: JavaScript
- Size: 123 KB
- Stars: 16
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Building Guru App with EmberCLI
* Demo: [http://goo.gl/K0Lf61](http://goo.gl/K0Lf61)
* Slides: [http://goo.gl/GvhkWE](http://goo.gl/GvhkWE)
[](http://www.youtube.com/watch?v=O7XSeSZ_JNI)
This app requires EmberCLI to be installed. You can install it via npm using `npm install -g ember-cli`
``` bash
$ ember new guru-app
$ cd guru-app
```
Install additional npm and bower dependencies
``` bash
$ npm install --save-dev broccoli-merge-trees
$ npm install --save-dev broccoli-static-compiler
$ npm install --save-dev broccoli-sass
$ bower install --save ratchet
```
---
Modify your Brocfile
``` javascript
/* global require, module */
var mergeTrees = require('broccoli-merge-trees');
var pickFiles = require('broccoli-static-compiler');
var EmberApp = require('ember-cli/lib/broccoli/ember-app');
var app = new EmberApp();
app.import('vendor/ratchet/js/modals.js');
app.import('vendor/ratchet/js/popovers.js');
app.import('vendor/ratchet/js/segmented-controllers.js');
app.import('vendor/ratchet/js/sliders.js');
app.import('vendor/ratchet/js/toggles.js');
var fonts = pickFiles('vendor/ratchet/fonts', {
srcDir: '/',
files: ['ratchicons.eot', 'ratchicons.svg', 'ratchicons.ttf', 'ratchicons.woff'],
destDir: '/fonts'
});
module.exports = mergeTrees([app.toTree(), fonts]);
```
---
Rename `app/styles/app.css` to `app/styles/app.scss`
---
### Run the application
``` bash
$ ember serve
```
and open [http://localhost:4200](http://localhost:4200)
---
### Modify `index.html` head
``` html
```
---
### Create Application Adapter
``` bash
$ ember g adapter application
```
``` javascript
import DS from 'ember-data';
export default DS.RESTAdapter.extend({
host: 'http://addressbook-api.herokuapp.com'
});
```
---
### Create Model
``` bash
$ ember g model contact
```
``` javascript
import DS from 'ember-data';
export default DS.Model.extend({
first : DS.attr('string'),
last : DS.attr('string'),
avatar : DS.attr('string'),
github : DS.attr('string'),
notes : DS.attr('string'),
fullName: function() {
return this.get('first') + ' ' + this.get('last');
}.property('first', 'last')
});
```
---
### Create Routes
``` bash
$ ember g route index
```
```javascript
import Ember from 'ember';
export default Ember.Route.extend({
redirect: function() {
this.transitionTo('contacts.index');
}
});
```
---
``` bash
$ ember g route contacts/index
```
``` javascript
import Ember from 'ember';
export default Ember.Route.extend({
model: function() {
return this.store.find('contact');
},
actions: {
refresh: function() {
this.controller.set('isRefreshing', true);
Ember.run.later(this, function() {
this.store.find('contact').then(function(data) {
this.controller.set('content', data);
this.controller.set('isRefreshing', false);
}.bind(this));
}, 3000);
}
}
});
```
---
``` bash
$ ember g route contacts/show
```
``` javascript
import Ember from 'ember';
export default Ember.Route.extend({
model: function(params) {
return this.store.find('contact', params.id);
}
});
```
---
### Update Router
``` javascript
import Ember from 'ember';
var Router = Ember.Router.extend({
location: GuruAppENV.locationType
});
Router.map(function() {
this.resource('contacts', { path: '/contacts' }, function() {
this.route('show', { path: '/:id' });
});
});
export default Router;
```
---
### Update `app.scss`
``` css
@import "vendor/ratchet/sass/ratchet";
.content {
background-color: #efeff4;
&.has-footer {
padding-bottom: 45px;
}
}
.bar-nav {
background-color: #f7f7f7;
}
.table-view.has-header {
margin-top: 0px !important;
}
.table-view-cell.media img {
width: 40px;
height: 40px;
border-radius: 20px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
}
.card.padded {
padding: 20px;
}
.spin {
-webkit-animation: spin 2s infinite linear;
-moz-animation: spin 2s infinite linear;
-o-animation: spin 2s infinite linear;
animation: spin 2s infinite linear;
}
@-moz-keyframes spin {
from { -moz-transform: rotate(0deg); }
to { -moz-transform: rotate(360deg); }
}
@-webkit-keyframes spin {
from { -webkit-transform: rotate(0deg); }
to { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
from {transform:rotate(0deg);}
to {transform:rotate(360deg);}
}
```
### Handlebars Templates
##### application.hbs
``` handlebars
{{outlet}}
```
##### contacts/index.hbs
``` handlebars
JavaScript Gurus
{{#each contact in controller}}
-
{{#link-to "contacts.show" contact class="navigate-right"}}
{{contact.fullName}}
{{contact.id}}
{{/link-to}}
{{/each}}
```
##### contacts/show.hbs
``` handlebars
{{#link-to 'contacts' class="icon icon-left-nav pull-left"}}{{/link-to}}
JavaScript Gurus
```