😎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 withember octant You can find the details guide from theofficial site.
- install Node.js
- then open terminal then hit
npm install -g ember-cliember 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 findhere!
😨 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 personOpen,app/components/person.js and includes
importComponentfrom'@glimmer/component';import{tracked}from'@glimmer/tracking';import{action,get,set}from'@ember/object';import{injectasservice}from'@ember/service';exportdefaultclassPersonComponentextendsComponent{name="Hello from - Person Component";@trackedbindableVariable='It makes two way binding easier';@servicestore;// access ember data easily.@servicerouter;// access router from componentperson={};// declare object// array declarationpersons=[{name:"ABC",country:"Bangladesh"},{name:"DEF",country:"Dhaka"},]// replacement of init() methodconstructor(){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);}@actiononClick(){alert('Great Job! We can make it!')// dynamically we can navigate to different route from componentthis.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 -->{{logthis.person}}<p>Updated Value is:{{this.bindableVariable}}<p><ol>{{#eachthis.personsas|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 stateOpen,app/components/state.js and includes
importComponentfrom'@glimmer/component';import{tracked}from'@glimmer/tracking';import{action,get,set}from'@ember/object';import{injectasservice}from'@ember/service';importutilsfrom"../utils";exportdefaultclassStateComponentextendsComponent{@trackedstateData={label:'',description:'',code:''};@trackedisPermitToSave=false;constructor(){super(...arguments);}@actiononChange(event){letcode=event.target.value.trim();if(code){if(code){set(this.stateData,'code',code);}}this.isPermitToSave=true;}@actionsave(){console.log('Save Data:-',this.stateData);// after save, optional staff we can dothis.isPermitToSave=false;this.stateData={};}}Now open,app/components/state.hbs and includes
<h1>Hello from, Form Manipulation</h1><labelfor="select">Select Class:</label><selectid="select"onchange={{actionthis.onChange}}><optionvalue="">-- Select One --</option><optionvalue="item1">items 1</option><optionvalue="item2">items 2</option></select><labelfor="label">Label:</label><inputvalue={{this.stateData.label}}onchange={{action(mutthis.stateData.label)value="target.value"}}type="text"placeholder="Ex. ABC"><labelfor="description">Description:</label><inputvalue={{this.stateData.description}}onchange={{action(mutthis.stateData.description)value="target.value"}}type="text"id="description"placeholder="Ex. ABC Description">{{#ifthis.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 applicationember g component dciopen,app/controllers/application.js and includes
importControllerfrom'@ember/controller';import{action,get,set}from'@ember/object';import{tracked}from"@glimmer/tracking";exportdefaultclassApplicationControllerextendsController{@trackedcomponentName='dci';@actionparentFunc(value){alert('Hello From Parent:-'+value);}}Openapp/templates/application.hbs
{{#componentgreetingMSG='Hello From, DCI Component'functionRef=this.parentFunc}}<h1> Welcome Here!</h1>{{/component}}Open,app/components/dci.js and includes
importComponentfrom'@glimmer/component';exportdefaultclassDciComponentextendsComponent{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
importRoutefrom'@ember/routing/route';exportdefaultclassWelcomeRouteextendsRoute{beforeModel(transition){console.log('message:-',transition);}model(params){console.log('This is the dynamic segment data:',params);}}- finally open
app/templates/application.hbs
<LinkToclass=""@route="welcome"@model="myappcode">Welcome</LinkTo>👌 Congratulations!. & Thank You!
Feel free to comments, If you have any issues & queries.
References
Top comments(0)
For further actions, you may consider blocking this person and/orreporting abuse
