😎It's time for Ember Octane! Sound great!
Official Announcement
Octane becomes the default for Ember, Thanks in advance! If you are looking for the latest stable release of Ember, please instead visit guides.emberjs.com.
Quick roll-up with ember octant You can find the details guide from the official site.
- install Node.js
- then open terminal then hit
npm install -g ember-cli
ember new ember-quickstart -b @ember/octane-app-blueprint
👌 Congratulations!. We make it, see how easy it was?.
Note:- I'm not going to focus on each section as we know ember official guide is super useful and more advance. Here, I'm going to cover something those are really essential when we roll up with a project.
Ohm! One thing I forgot to talk about
EmberJs related update news we can find here!
😨 Okay it's too much talk now let's begin
1. Play with the octane new component features.
We can create a component using CLI from the terminal,
ember g component person
Open, app/components/person.js and includes
import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';
import { action, get, set } from '@ember/object';
import { inject as service } from '@ember/service';
export default class PersonComponent extends Component {
name = "Hello from - Person Component";
@tracked bindableVariable = 'It makes two way binding easier';
@service store; // access ember data easily.
@service router; // access router from component
person = {}; // declare object
// array declaration
persons = [
{name: "ABC", country: "Bangladesh"},
{name: "DEF", country: "Dhaka"},
]
// replacement of init() method
constructor() {
super(...arguments);
this.bindableVariable = "change it nolonger needs set() method";
set(this.person, 'name', 'Sadhan');
set(this.persons[1], 'name', 'Sadhan');
console.log('person', this.person);
console.log('persons', this.persons);
}
@action onClick() {
alert('Great Job! We can make it!')
// dynamically we can navigate to different route from component
this.router.transitionTo('About'); // make sure you have this route
}
}
Now open, app/components/person.hbs add includes
<h1>{{this.name}}</h1>
<!-- open up, your browser dev console -->
{{log this.person}}
<p>Updated Value is: {{this.bindableVariable}}<p>
<ol>
{{#each this.persons as |item|}}
<li>{{item.name}}</li>
{{/each}}
</ol>
<button {{on "click" this.onClick}}>Clik Me!</button>
Initially, we make it.
2. Handling From Elements
ember g component state
Open, app/components/state.js and includes
import Component from '@glimmer/component';
import {tracked} from '@glimmer/tracking';
import {action, get, set} from '@ember/object';
import {inject as service} from '@ember/service';
import utils from "../utils";
export default class StateComponent extends Component {
@tracked stateData = {
label: '',
description: '',
code: ''
};
@tracked isPermitToSave = false;
constructor() {
super(...arguments);
}
@action onChange(event) {
let code = event.target.value.trim();
if(code) {
if (code) {
set(this.stateData, 'code', code);
}
}
this.isPermitToSave = true;
}
@action save() {
console.log('Save Data:-', this.stateData);
// after save, optional staff we can do
this.isPermitToSave = false;
this.stateData = {};
}
}
Now open, app/components/state.hbs and includes
<h1>Hello from, Form Manipulation</h1>
<label for="select">Select Class:</label>
<select id="select" onchange={{action this.onChange}}>
<option value="">-- Select One --</option>
<option value="item1">items 1</option>
<option value="item2">items 2</option>
</select>
<label for="label">Label:</label>
<input value={{this.stateData.label}} onchange={{action (mut this.stateData.label) value="target.value"}} type="text" placeholder="Ex. ABC">
<label for="description">Description:</label>
<input value={{this.stateData.description}} onchange={{action (mut this.stateData.description) value="target.value"}} type="text" id="description" placeholder="Ex. ABC Description">
{{#if this.isPermitToSave}}
<button {{on 'click' this.save}}>Save</button>
{{/if}}
Note: Here, I'm just trying to cover basic form binding but the recommendation will be using theember servicefeature. I will try to cover its future if I can.
😎Great! another achievement.
3. Dynamic Component Injection with passing data & function reference
ember g controller application
ember g component dci
open, app/controllers/application.js and includes
import Controller from '@ember/controller';
import { action, get, set } from '@ember/object';
import { tracked } from "@glimmer/tracking";
export default class ApplicationController extends Controller {
@tracked componentName = 'dci';
@action parentFunc(value) {
alert('Hello From Parent:-' + value);
}
}
Open app/templates/application.hbs
{{#component
greetingMSG='Hello From, DCI Component'
functionRef = this.parentFunc
}}
<h1> Welcome Here! </h1>
{{/component}}
Open, app/components/dci.js and includes
import Component from '@glimmer/component';
export default class DciComponent extends Component {
constructor() {
super(...arguments);
console.log('Parent data:- ', this.args.greetingMSG;
this.args.functionRef('ABC'); // it will call parent function
}
}
Now open, app/components/dci.js and includes another implementation
<h1>{{this.args.greetingMSG}}</h1>
<button {{on 'click' this.functionRef 'ABC'}}>Click Me!</button>
😨 We do lots of things, we are almost done.
Finally 4. It's about Routing & Navigation
ember g route welcome
- Open
app/router.jsand update
this.route('welcome', {path: '/:app_code'}, function() {
});
- Open
app/routes/welcome.jsand includes
import Route from '@ember/routing/route';
export default class WelcomeRoute extends Route {
beforeModel(transition) {
console.log('message:-', transition);
}
model(params) {
console.log('This is the dynamic segment data: ', params );
}
}
- finally open
app/templates/application.hbs
<LinkTo class="" @route="welcome" @model="myappcode">Welcome</LinkTo>
👌 Congratulations!. & Thank You!
Feel free to comments, If you have any issues & queries.
Top comments (0)