Aurelia 1.x Q&A - Sandbox at https://codesandbox.io/s/aurelia-javascript-sandbox-jnl6q85zq5
zewa666 on tr-result
test(tr): returnObjects option (compare)
zewa666 on tr-result
fix(tr): result of tr the TR f… (compare)
dependabot[bot] on npm_and_yarn
chore(deps): bump socket.io fro… (compare)
EisenbergEffect on master
doc: new one time backer (compare)
I just read the documentation regarding function references and I’m a bit confused about callbacks with parameters. Here’s my confusion:
In my parent view, I can have the following:
<my-custom-comp callback.call=“myParentFunction(paramA, paramB)” … >
1) I’m assuming that paramA and paramB are actually bindable fields, but are they of the parent or of the custom element?
2) If they are of the parent, how are they accessed in the custom element so that it can call callback({paramA: <first passed value>, paramB: <second passed value>})
3) If they are of the custom element, then I’m going to assume that I can make the call like callback({paramA: this.paramA, paramB: this.paramB})
4) How is myParentFunction defined in the parent? Like so?
myParentFunction(arbitraryParamNameA, arbitraryParamNameB)
Thanks!
Ok…so I searched through discourse and found this post —> https://discourse.aurelia.io/t/call-function-from-custom-element/1793
Which kinda answres my question. Thanks y’all! :-)
Hi all - this is a sort of Aurelia-related question. If you look inside a lot of node_modules
package folders - let's take aurelia-fetch-client
for example - in the dist
folder there are various targets, e.g. amd
, commonjs
, system
, 2015
, umd
, etc. My question is, how does a bundler e.g. webpack choose which one to load? Is it a webpack thing, or a tsconfig thing (I'm using TypeScript). I'm really hazy on which part of the toolchain is doing this.
My problem is I have a bundle that's broken in IE11. I can see that its contents includes code straight out of aurelia-pal-browser/dist/es2015
which IE is not going to handle very well.
new AureliaPlugin({
dist: 'es2015'
})
Hello @bigopon , I have a component which has a css in require that is overriding some of the core bootstrap classes..
now since I am opening this component in new tab, it is not overriding style for other pages
--- this is existing functionality ---
now I have to use this same component in a dialog and when I am loading this component in dialog it is overriding styles for the whole page - colors fonts etc.
how can I stop this. Any help will be appreciated.
model.bind
?
import { singleton } from '@aurelia/kernel';
import { LoggingWinston } from '@google-cloud/logging-winston';
import { instanceCachingFactory, registry } from 'tsyringe';
import winston, { format, Logger, LoggerOptions, transports } from 'winston';
export const LoggerDefault = 'defaultLogger';
export const LoggerTypeOrm = 'typeormLogger';
export const LoggerSecurity = 'securityLogger';
export const LoggerSecurityChild = 'childSecurityLogger';
@registry([
{ token: LoggerDefault, useFactory: instanceCachingFactory(createDefaultLogger) },
{ token: LoggerTypeOrm, useFactory: instanceCachingFactory(createTypeOrmLogger) },
{ token: LoggerSecurity, useFactory: instanceCachingFactory(createSecurityLogger) },
])
export class LoggerProvider {}
export function createDefaultLogger(): Logger {
const config: LoggerOptions =
process.env['NODE_ENV'] === 'development' ? devConfig() : serverConfig();
return winston.loggers.add(LoggerDefault, config);
}
function createTypeOrmLogger(): Logger {
const config: LoggerOptions =
process.env['NODE_ENV'] === 'development' ? devConfig() : serverConfig();
return winston.loggers.add(LoggerTypeOrm, config);
}
function createSecurityLogger(): Logger {
const config: LoggerOptions =
process.env['NODE_ENV'] === 'development' ? devConfig() : googleConfig();
return winston.loggers.add(LoggerSecurity, config);
}
function devConfig(): LoggerOptions {
const console = new transports.Console({
level: process.env.LOG_LEVEL || 'info',
debugStdout: true,
format: format.combine(format.cli(), format.splat(), format.simple()),
});
return {
transports: [console],
exceptionHandlers: [console],
};
}
function googleConfig(): LoggerOptions {
return {
transports: [
new LoggingWinston({
projectId: process.env.GOOGLE_SERVICE_ACCOUNT_PROJECT_ID,
credentials: {
client_email: process.env.GOOGLE_SERVICE_ACCOUNT_CLIENT_EMAIL!,
private_key: process.env.GOOGLE_SERVICE_ACCOUNT_PRIVATE_KEY!,
},
}),
],
};
}
function serverConfig(): LoggerOptions {
return {
transports: [
new transports.Console({
level: process.env.LOG_LEVEL || 'info',
debugStdout: true,
format: format.combine(format.splat(), format.simple()),
}),
],
};
}
If I have a custom element and use the DOM remove()
function on it, will the unbind()
and detached()
lifecycle hooks on its view-model be called? For example
const myCustomElement = document.querySelector('#myCustomElement');
myCustomElement.remove()
I'm trying to track down whether I'm doing this incorrectly or if I should not expect those lifecycle hooks to be called when an element is removed from the DOM in this way.
I can confirm that those lifecycle hooks get called when the element is in a route and I navigate away from the route.