TL;DR
Zde je několik užitečných globálních kódů, které můžete použít v aplikaci Ember.js k rychlejšímu ladění, a to i bez inspektora ember
Pokud byste chtěli použít verzi doplňku:
ember-handy-globals
Můžete to také najít jako gist
V tomto příspěvku na blogu se dozvíte, jak přidat nějaké pěkné globální prvky, které vám pomohou při vývoji vaší aplikace Ember.js.
Jednou z věcí, díky kterým je ekosystém Ember.js hračkou, je Ember Inspector. Jako vývojáři Ember.js jej často používáme k získání aktuálního řadiče, služby, aktuálního modelu trasy nebo komponenty k jeho ladění, i když jsem se při psaní tohoto příspěvku dozvěděl několik nových věcí o inspektoru, které jsem nikdy nepoužil záložka Promises předtím 🤒, miluji to!
Ale čas od času rychlé opravy a kontroly začínají být trochu otravné. Speciálně v dlouhých relacích ladění a samozřejmě pokud máte rádi automatické ukládání souborů ve VSCode, jako já.
Čas od času také potřebujete několik žhavých objektů v konzole pro správné ladění nebo sestavení nějakého složitého objektu, takže mít $E rezervované pro konkrétní objekt inspektora není nezbytně dostačující.
Dalším dobrým důvodem je to, že někdy testujete svou aplikaci v prohlížeči, který nemá k dispozici nebo nainstalovaný ember-inspector, takže máte k dispozici sadu nástrojů, jak to zvládnout!
Zde je vynikající Intro To Ember Inspector, pokud nejste obeznámeni 😄
Jdeme na to, Global instance-initializer
Jeden ze souborů, které neustále přenáším z projektu do projektu, je takzvaný instance-initializer/globals.js
ember generate instance-initializer globals
Zde cituji aplikaci a instance Ember.js
Takže v tomto instančním inicializátoru obdržíme instanci aplikace, kterou používám k vytváření nebo odvození globálů, které mě udržují produktivní.
//instance-initializer/globals.js
export function initialize(application) {}
export default {
name: "globals",
initialize,
};
Nejprve bychom se mohli ujistit, že je přidáme pouze během vývoje
//instance-initializer/globals.js
export function initialize(application) {
let { environment } = application.resolveRegistration('config:environment')
if ( environment !== 'production') {
}
}
export default {
name: "globals",
initialize,
};
Základní užitečné globální informace
//instance-initializer/globals.js
export function initialize(application) {
let { environment } = application.resolveRegistration('config:environment')
if ( environment !== 'production') {
/**
This basically exposes the application, pretty useful because
you can use stuff like this from the console.
App.lookup('route:some-route').actions.doSomething();
*/
window.App = application;
/*
This will gives us access to the store easily, to make fast queries or checks!
Fast and easy:
var s = App.store.peekRecord('some-model', 1);
App.store.createRecord('some-model', {name: 'Alberto'})
*/
window.App.store = application.__container__.lookup("service:store");
}
}
export default {
name: "globals",
initialize,
};
Poté, co jsem nějakou dobu přímo používal App.lookup(), zjistil jsem, že je to příliš časově náročné na načasování typu objektu, který jsem hledal
App.lookup("service:some-service");
App.lookup("route:some-route");
Začal jsem tedy přidávat zkratky funkcí.
//instance-initializer/globals.js
export function initialize(application) {
let { environment } = application.resolveRegistration('config:environment')
if ( environment !== 'production') {
...//to avoid making this too long
window.App.service = function(name) {
return application.lookup(`service:${name}`)
}
// or a shortcut for every ember types.
let objects = [
'service',
'controller',
'route',
'model'
];
objects.forEach(type => {
window.App[type] = function(name) {
return application.lookup(`${type}:${name}`)
}
})
}
}
export default {
name: 'globals',
initialize
}
I když je to téměř stejné psaní, zaprvé je to opravdu jednodušší, ale také se automaticky doplňuje chromovaná konzole, takže výhra.
App.controller("auth.projects");
App.model("some-model");
App.route("auth.projects");
A nejnovější přírůstek, který mě vlastně donutil napsat tento blogpost, můj konečný dárek 😅.
//instance-initializer/globals.js
export function initialize(application) {
let { environment } = application.resolveRegistration('config:environment')
if ( environment !== 'production') {
class CurrentContext {
get model() {
return application.lookup(
`controller:${application.lookup("service:router").currentRouteName}`
).model;
}
get controller() {
return application.lookup(
`controller:${application.lookup("service:router").currentRouteName}`
);
}
get route() {
return application.lookup(
`route:${application.lookup("service:router").currentRouteName}`
);
}
}
window.App.ctx = new CurrentContext();
}
}
export default {
name: "globals",
initialize,
};
Vytvoříme tento CurrentContext třídy jen proto, abychom měli nativní getry, abychom nemuseli volat metody. Používá currentRouteName od Service Router získat aktuální model, trasu nebo řadič, takže je to v podstatě super zkratka pro rychlé ladění!
var model = App.ctx.model; //current route model!
var controller = App.ctx.controller; //current route controller!
var route = App.ctx.route; //current route route!
Co si myslíte o těchto zkratkách? Plánujete některé z nich využít? máš nějaké tajemství, které bys chtěl sdílet s komunitou #emberjs? Prosím, udělejte to!
Pokud byste chtěli použít verzi doplňku:
ember-handy-globals
Můžete to také najít jako gist