Observing Arrays
// component.js // items: [{name:'a'},{name:'b'}], onArrayChange: function() { console.log('Row count changed: ' + JSON.stringify(this.items)); }.observes('items.@each'), onNameChange: function() { console.log('Name changed: ' + JSON.stringify(this.items)); }.observes('items.@each.name'),
Trigger Action
Ember.View.extend({ templateName: 'labView', items: [], click: function(event) { // Ember.$("#container-1").click(); // this.$('#container-1').click(); // this.$('#fname-3').val(); } } }); // .hbs element with dynamic ids <input type="text" id="fname-{{item.id}}" name="firstName">
String to Int value
parseInt(Id)
#10 | Bubble Up Action from Component to Contorller
// some-component.js this.sendAction('actionName', params, event); // template {{some-component actionName="foobar"}} // controller actions: { foobar(params, event) { alert('action received'); } }
#09 | Working with Arrays
Add to Array
this.get('names') .pushObject({ id: Id, name:'newName' });
Remove from Array
let names = ['red', 'green', 'blue', 'yellow', 'orange']; names.removeAt(0); // ['green', 'blue', 'yellow', 'orange'] names.removeAt(2, 2); // ['green', 'blue']
Edit an Object in an Array
var temp = this.get('names').objectAt(2); Ember.set(temp, "name", "modified name");
#08 | onInit
handleAuth:function(){ var auth = this.get('service').get('isauth'); if(auth) { Ember.$('.myClass').css("display","none"); this.set('isViewable',true); } else { Ember.$('.myClass').css("display","block"); this.set('isViewable',false); } }.on('init'),
#07 | Ember Component Lifecycle
import Ember from 'ember'; export default Ember.Component.extend({ didReceiveAttrs() { this._super(...arguments); const contacts = this.get('data'); if (typeof contacts === 'string') { this.set('contacts', JSON.parse(contacts)); } else { this.set('contacts', contacts); } } });
#06 | Ember Build/Deploy
$ember build -prod $ember build --environment=development
#05 | Element by Id
Ember.$('#wrapper')
will find this element in the page. this.$('#wrapper')
finds the within the current component/view. The difference is in the scope.
Ember.$('#wrapper') vs this.$('#wrapper')
#04 | Ember automatically adds a class ‘active’ to currently activated route
one can just style this clss to see it in action
.active { background: yellow; }
{{#link-to 'about'}}About{{/link-to}}
{{#link-to 'contact'}}Contact{{/link-to}}
#03 | Wildcard Route for 404
// app/router.js Router.map(function() { // other routes this.route('page-not-found', { path: '/*wildcard' }); });
// app/templates/page-not-found.hbs Page Not Found {{outlet}}
#02 | Helper Method
// app/helpers/increment.js import Ember from "ember"; export function increment(integer){ return ++integer; } export default Ember.Helper.helper(increment);
// app/templates/index.hbs {{#each model as |contact index|}} #{{increment index}}. {{contact.title}} {{/each}}
#01 | Setting up Mock/Hardcoded model within a Route
// app/routes/post.js import Ember from 'ember'; var articles = [{ id: 1, title: 'FirstPost', content: 'First Post' }, { id: 2, title: 'About', content: 'About Splash' }, { id: 5, title: 'Contact', content: 'You can reach us too!' }]; export default Ember.Route.extend({ model: function(params) { var index = params.post_id -1; return articles[index]; } });
// app/templates/post.hbs Id:: {{model.id}} title: {{model.title}} body: {{model.content}}
Advertisements