Skip to content

Aurelia FAQ

Jump to bottomEditNew page
David Gonzalez edited this page Oct 28, 2016 · 4 revisions

What is data binding in Aurelia, and when should I use it?

Data binding in Aurelia is the method by which data is exposed from a ViewModel to a View. In typical MVVM (Model-View-ViewModel) fashion, the View talks with the ViewModel who can talk with the Model. But, the View should never talk directly to the Model. Data binding is the means by which the communication occurs between the View and ViewModel, and it should be used whenever data needs to be exposed to the UI.

There are three types of data binding in Aurelia.

  • One-way - Updates made to the ViewModel update the View, but updates to the View do not update the ViewModel
  • Two-way - Updates made to the ViewModel update the View, and vise versa
  • One-Time - Data from the ViewModel is populated into the View when first loaded, but subsequent updates to the ViewModel do not update the View

If you’re interested in a deep dive into how data binding works in Aurelia, check out the following talk from this past December given by Jeremy Danyow.

Aurelia.io Data Binding

I'm reading some data from Firebase and want to update UI whenever it changes. Can I use databinding for that?

Yes, and there is a project called aurelia-firebase that provides an AuthenticationManager and ReactiveCollection class that can be used to simplify interactions with Firebase. Using the ReactiveCollection class you can expose the collection to the View and any updates to the collection will propagate into the view.

Should all clientside data be part of a view model? Or can I store some state separately in a class?

Not necessarily. State can be stored in separate classes that are not exposed as a “view model.” This is pretty common for classes that store configuration or those that are used as a service. For instance, you could choose to do some client side caching of data in a class that is responsible for data access in order to optimize performance.

How does Aurelia interact with UI elements that are not written in Aurelia? I want to use a Bootstrap GUI component. Can I do that?

Templates (views) in Aurelia are just HTML which means they can be styled and include Bootstrap components just like any other HTML page. Aurelia doesn’t depend on Bootstrap or FontAwesome, but both libraries are bundled with the aurelia-navigation-skeleton (starter app) for convenience sake.

In order to include Bootstrap you can install it using jspm and then use the require tag in your template.

<template>
<require from="bootstrap/css/bootstrap.css"></require>
...
</template>

After that's done you're free to use Bootstrap within your HTML as you would normally.

To use Bootstrap's GUI elements like Tooltip and Popover simply add them to your view as you normally would in any other HTML file.

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Aurelia with tooltips!!!">
Tooltip Example
</button>

And then in your ViewModel you can enable the tooltip in the constructor.

import $ from 'bootstrap';
import bootstrap from 'bootstrap';
export class TooltipExample {
constructor() {
$('[data-toggle="tooltip"]').tooltip();
}
}

Does Aurelia impact how I style DOM elements with CSS?

No, templates are written in HTML and can be styled using CSS just like any other HTML page.

Where can I learn more about Aurelia?

The best place to learn about Aurelia is through the Aurelia homepage.

Aurelia.io

I there a way of using document.ready in Aurelia?

Where can I use Jquery in the .js files (ViewModels)

** How do the view and viewmodel interact?**

How to get the height of an element within aurelia

Add a custom footer
Add a custom sidebar

Clone this wiki locally

, 'i'); if (__m === '*' || __re.test(location.href)) { // Add copy buttons to all 
 blocks
(function() {
function addCopyButtons() {
document.querySelectorAll('pre code').forEach(function(codeBlock) {
if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;
codeBlock.parentElement.setAttribute('data-copy-added', 'true');
var btn = document.createElement('button');
btn.textContent = 'Copy';
btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';
btn.onmouseover = function() { this.style.opacity = '1'; };
btn.onmouseout = function() { this.style.opacity = '0.7'; };
btn.onclick = function() {
navigator.clipboard.writeText(codeBlock.textContent).then(function() {
btn.textContent = 'Copied!';
setTimeout(function() { btn.textContent = 'Copy'; }, 1500);
});
};
codeBlock.parentElement.style.position = 'relative';
codeBlock.parentElement.appendChild(btn);
});
}
addCopyButtons();
// Re-run on dynamic content
var observer = new MutationObserver(addCopyButtons);
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '
Aurelia FAQ · devuxd/SeeCodeRun Wiki · GitHub
Skip to content
Aurelia FAQ
Jump to bottomEditNew page

David Gonzalez edited this page Oct 28, 2016
·
4 revisions
What is data binding in Aurelia, and when should I use it?
Data binding in Aurelia is the method by which data is exposed from a ViewModel to a View. In typical MVVM (Model-View-ViewModel) fashion, the View talks with the ViewModel who can talk with the Model. But, the View should never talk directly to the Model. Data binding is the means by which the communication occurs between the View and ViewModel, and it should be used whenever data needs to be exposed to the UI.
There are three types of data binding in Aurelia.
  • One-way - Updates made to the ViewModel update the View, but updates to the View do not update the ViewModel
  • Two-way - Updates made to the ViewModel update the View, and vise versa
  • One-Time - Data from the ViewModel is populated into the View when first loaded, but subsequent updates to the ViewModel do not update the View
If you’re interested in a deep dive into how data binding works in Aurelia, check out the following talk from this past December given by Jeremy Danyow.
Aurelia.io Data Binding
I'm reading some data from Firebase and want to update UI whenever it changes. Can I use databinding for that?
Yes, and there is a project called aurelia-firebase that provides an AuthenticationManager and ReactiveCollection class that can be used to simplify interactions with Firebase. Using the ReactiveCollection class you can expose the collection to the View and any updates to the collection will propagate into the view.
Should all clientside data be part of a view model? Or can I store some state separately in a class?
Not necessarily. State can be stored in separate classes that are not exposed as a “view model.” This is pretty common for classes that store configuration or those that are used as a service. For instance, you could choose to do some client side caching of data in a class that is responsible for data access in order to optimize performance.
How does Aurelia interact with UI elements that are not written in Aurelia? I want to use a Bootstrap GUI component. Can I do that?
Templates (views) in Aurelia are just HTML which means they can be styled and include Bootstrap components just like any other HTML page. Aurelia doesn’t depend on Bootstrap or FontAwesome, but both libraries are bundled with the aurelia-navigation-skeleton (starter app) for convenience sake.
In order to include Bootstrap you can install it using jspm and then use the require tag in your template.
<template>
<require from="bootstrap/css/bootstrap.css"></require>
...
</template>

After that's done you're free to use Bootstrap within your HTML as you would normally.
To use Bootstrap's GUI elements like Tooltip and Popover simply add them to your view as you normally would in any other HTML file.
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Aurelia with tooltips!!!">
Tooltip Example
</button>

And then in your ViewModel you can enable the tooltip in the constructor.
import $ from 'bootstrap';
import bootstrap from 'bootstrap';
export class TooltipExample {
constructor() {
$('[data-toggle="tooltip"]').tooltip();
}
}

Does Aurelia impact how I style DOM elements with CSS?
No, templates are written in HTML and can be styled using CSS just like any other HTML page.
Where can I learn more about Aurelia?
The best place to learn about Aurelia is through the Aurelia homepage.
Aurelia.io
I there a way of using document.ready in Aurelia?
Where can I use Jquery in the .js files (ViewModels)
** How do the view and viewmodel interact?**
How to get the height of an element within aurelia
 Add a custom footer

 Add a custom sidebar

Clone this wiki locally

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Force GitHub README to respect dark mode
(function() {
var style = document.createElement('style');
style.textContent = '
.markdown-body {
color-scheme: dark light;
}
.markdown-body pre { background: #161b22 !important; }
.markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }
.markdown-body table th, .markdown-body table td { border-color: #30363d !important; }
.markdown-body img { background: #0d1117; }
.markdown-body blockquote { border-left-color: #8b949e; }
.markdown-body hr { border-color: #30363d; }
';
document.head.appendChild(style);
})();
}
} catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
Aurelia FAQ · devuxd/SeeCodeRun Wiki · GitHub
Skip to content
Aurelia FAQ
Jump to bottomEditNew page

David Gonzalez edited this page Oct 28, 2016
·
4 revisions
What is data binding in Aurelia, and when should I use it?
Data binding in Aurelia is the method by which data is exposed from a ViewModel to a View. In typical MVVM (Model-View-ViewModel) fashion, the View talks with the ViewModel who can talk with the Model. But, the View should never talk directly to the Model. Data binding is the means by which the communication occurs between the View and ViewModel, and it should be used whenever data needs to be exposed to the UI.
There are three types of data binding in Aurelia.
  • One-way - Updates made to the ViewModel update the View, but updates to the View do not update the ViewModel
  • Two-way - Updates made to the ViewModel update the View, and vise versa
  • One-Time - Data from the ViewModel is populated into the View when first loaded, but subsequent updates to the ViewModel do not update the View
If you’re interested in a deep dive into how data binding works in Aurelia, check out the following talk from this past December given by Jeremy Danyow.
Aurelia.io Data Binding
I'm reading some data from Firebase and want to update UI whenever it changes. Can I use databinding for that?
Yes, and there is a project called aurelia-firebase that provides an AuthenticationManager and ReactiveCollection class that can be used to simplify interactions with Firebase. Using the ReactiveCollection class you can expose the collection to the View and any updates to the collection will propagate into the view.
Should all clientside data be part of a view model? Or can I store some state separately in a class?
Not necessarily. State can be stored in separate classes that are not exposed as a “view model.” This is pretty common for classes that store configuration or those that are used as a service. For instance, you could choose to do some client side caching of data in a class that is responsible for data access in order to optimize performance.
How does Aurelia interact with UI elements that are not written in Aurelia? I want to use a Bootstrap GUI component. Can I do that?
Templates (views) in Aurelia are just HTML which means they can be styled and include Bootstrap components just like any other HTML page. Aurelia doesn’t depend on Bootstrap or FontAwesome, but both libraries are bundled with the aurelia-navigation-skeleton (starter app) for convenience sake.
In order to include Bootstrap you can install it using jspm and then use the require tag in your template.
<template>
<require from="bootstrap/css/bootstrap.css"></require>
...
</template>

After that's done you're free to use Bootstrap within your HTML as you would normally.
To use Bootstrap's GUI elements like Tooltip and Popover simply add them to your view as you normally would in any other HTML file.
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Aurelia with tooltips!!!">
Tooltip Example
</button>

And then in your ViewModel you can enable the tooltip in the constructor.
import $ from 'bootstrap';
import bootstrap from 'bootstrap';
export class TooltipExample {
constructor() {
$('[data-toggle="tooltip"]').tooltip();
}
}

Does Aurelia impact how I style DOM elements with CSS?
No, templates are written in HTML and can be styled using CSS just like any other HTML page.
Where can I learn more about Aurelia?
The best place to learn about Aurelia is through the Aurelia homepage.
Aurelia.io
I there a way of using document.ready in Aurelia?
Where can I use Jquery in the .js files (ViewModels)
** How do the view and viewmodel interact?**
How to get the height of an element within aurelia
 Add a custom footer

 Add a custom sidebar

Clone this wiki locally

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Highlight search terms from Google/DuckDuckGo/Bing referrer
(function() {
var ref = document.referrer;
var terms = [];
if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {
var url = new URL(ref);
var q = url.searchParams.get('q') || url.searchParams.get('p');
if (q) {
terms = q.split(/\s+/).filter(function(t) { return t.length > 2; });
}
}
if (terms.length === 0) return;
var style = document.createElement('style');
style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';
document.head.appendChild(style);
function highlight(node) {
if (node.nodeType === 3) { // text node
var text = node.textContent;
var found = false;
terms.forEach(function(term) {
var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\]\\]/g, '\\') + ')', 'gi');
if (regex.test(text)) {
found = true;
var frag = document.createDocumentFragment();
var parts = text.split(regex);
parts.forEach(function(part, i) {
if (i % 2 === 0) {
frag.appendChild(document.createTextNode(part));
} else {
var span = document.createElement('span');
span.className = 'userscript-highlight';
span.textContent = part;
frag.appendChild(span);
}
});
node.parentNode.replaceChild(frag, node);
}
});
} else if (node.nodeType === 1 && node.childNodes) { // element
var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];
if (!skipTags.includes(node.tagName)) {
Array.from(node.childNodes).forEach(highlight);
}
}
}
highlight(document.body);
// Re-highlight on dynamic content
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(m) {
m.addedNodes.forEach(function(node) {
if (node.nodeType === 1 || node.nodeType === 3) highlight(node);
});
});
});
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
Aurelia FAQ · devuxd/SeeCodeRun Wiki · GitHub
Skip to content
Aurelia FAQ
Jump to bottomEditNew page

David Gonzalez edited this page Oct 28, 2016
·
4 revisions
What is data binding in Aurelia, and when should I use it?
Data binding in Aurelia is the method by which data is exposed from a ViewModel to a View. In typical MVVM (Model-View-ViewModel) fashion, the View talks with the ViewModel who can talk with the Model. But, the View should never talk directly to the Model. Data binding is the means by which the communication occurs between the View and ViewModel, and it should be used whenever data needs to be exposed to the UI.
There are three types of data binding in Aurelia.
  • One-way - Updates made to the ViewModel update the View, but updates to the View do not update the ViewModel
  • Two-way - Updates made to the ViewModel update the View, and vise versa
  • One-Time - Data from the ViewModel is populated into the View when first loaded, but subsequent updates to the ViewModel do not update the View
If you’re interested in a deep dive into how data binding works in Aurelia, check out the following talk from this past December given by Jeremy Danyow.
Aurelia.io Data Binding
I'm reading some data from Firebase and want to update UI whenever it changes. Can I use databinding for that?
Yes, and there is a project called aurelia-firebase that provides an AuthenticationManager and ReactiveCollection class that can be used to simplify interactions with Firebase. Using the ReactiveCollection class you can expose the collection to the View and any updates to the collection will propagate into the view.
Should all clientside data be part of a view model? Or can I store some state separately in a class?
Not necessarily. State can be stored in separate classes that are not exposed as a “view model.” This is pretty common for classes that store configuration or those that are used as a service. For instance, you could choose to do some client side caching of data in a class that is responsible for data access in order to optimize performance.
How does Aurelia interact with UI elements that are not written in Aurelia? I want to use a Bootstrap GUI component. Can I do that?
Templates (views) in Aurelia are just HTML which means they can be styled and include Bootstrap components just like any other HTML page. Aurelia doesn’t depend on Bootstrap or FontAwesome, but both libraries are bundled with the aurelia-navigation-skeleton (starter app) for convenience sake.
In order to include Bootstrap you can install it using jspm and then use the require tag in your template.
<template>
<require from="bootstrap/css/bootstrap.css"></require>
...
</template>

After that's done you're free to use Bootstrap within your HTML as you would normally.
To use Bootstrap's GUI elements like Tooltip and Popover simply add them to your view as you normally would in any other HTML file.
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Aurelia with tooltips!!!">
Tooltip Example
</button>

And then in your ViewModel you can enable the tooltip in the constructor.
import $ from 'bootstrap';
import bootstrap from 'bootstrap';
export class TooltipExample {
constructor() {
$('[data-toggle="tooltip"]').tooltip();
}
}

Does Aurelia impact how I style DOM elements with CSS?
No, templates are written in HTML and can be styled using CSS just like any other HTML page.
Where can I learn more about Aurelia?
The best place to learn about Aurelia is through the Aurelia homepage.
Aurelia.io
I there a way of using document.ready in Aurelia?
Where can I use Jquery in the .js files (ViewModels)
** How do the view and viewmodel interact?**
How to get the height of an element within aurelia
 Add a custom footer

 Add a custom sidebar

Clone this wiki locally

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Strip utm_, fbclid, gclid, etc. from all links on page
(function() {
var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',
'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',
'ref', 'ref_src', 'source', 'medium', 'campaign'];
function cleanUrl(url) {
try {
var u = new URL(url, window.location.origin);
var changed = false;
trackingParams.forEach(function(p) {
if (u.searchParams.has(p)) {
u.searchParams.delete(p);
changed = true;
}
});
return changed ? u.toString() : url;
} catch (e) {
return url;
}
}
function cleanLinks() {
document.querySelectorAll('a[href]').forEach(function(a) {
var clean = cleanUrl(a.href);
if (clean !== a.href) a.href = clean;
});
}
cleanLinks();
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(m) {
m.addedNodes.forEach(function(node) {
if (node.nodeType === 1) {
if (node.tagName === 'A') cleanLinks();
node.querySelectorAll('a[href]').forEach(function(a) {
var clean = cleanUrl(a.href);
if (clean !== a.href) a.href = clean;
});
}
});
});
});
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); }
})();
(function(){
try {
var __m = "youtube.com";
var __re = new RegExp('^' + "youtube\\.com" + '
Aurelia FAQ · devuxd/SeeCodeRun Wiki · GitHub
Skip to content
Aurelia FAQ
Jump to bottomEditNew page

David Gonzalez edited this page Oct 28, 2016
·
4 revisions
What is data binding in Aurelia, and when should I use it?
Data binding in Aurelia is the method by which data is exposed from a ViewModel to a View. In typical MVVM (Model-View-ViewModel) fashion, the View talks with the ViewModel who can talk with the Model. But, the View should never talk directly to the Model. Data binding is the means by which the communication occurs between the View and ViewModel, and it should be used whenever data needs to be exposed to the UI.
There are three types of data binding in Aurelia.
  • One-way - Updates made to the ViewModel update the View, but updates to the View do not update the ViewModel
  • Two-way - Updates made to the ViewModel update the View, and vise versa
  • One-Time - Data from the ViewModel is populated into the View when first loaded, but subsequent updates to the ViewModel do not update the View
If you’re interested in a deep dive into how data binding works in Aurelia, check out the following talk from this past December given by Jeremy Danyow.
Aurelia.io Data Binding
I'm reading some data from Firebase and want to update UI whenever it changes. Can I use databinding for that?
Yes, and there is a project called aurelia-firebase that provides an AuthenticationManager and ReactiveCollection class that can be used to simplify interactions with Firebase. Using the ReactiveCollection class you can expose the collection to the View and any updates to the collection will propagate into the view.
Should all clientside data be part of a view model? Or can I store some state separately in a class?
Not necessarily. State can be stored in separate classes that are not exposed as a “view model.” This is pretty common for classes that store configuration or those that are used as a service. For instance, you could choose to do some client side caching of data in a class that is responsible for data access in order to optimize performance.
How does Aurelia interact with UI elements that are not written in Aurelia? I want to use a Bootstrap GUI component. Can I do that?
Templates (views) in Aurelia are just HTML which means they can be styled and include Bootstrap components just like any other HTML page. Aurelia doesn’t depend on Bootstrap or FontAwesome, but both libraries are bundled with the aurelia-navigation-skeleton (starter app) for convenience sake.
In order to include Bootstrap you can install it using jspm and then use the require tag in your template.
<template>
<require from="bootstrap/css/bootstrap.css"></require>
...
</template>

After that's done you're free to use Bootstrap within your HTML as you would normally.
To use Bootstrap's GUI elements like Tooltip and Popover simply add them to your view as you normally would in any other HTML file.
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Aurelia with tooltips!!!">
Tooltip Example
</button>

And then in your ViewModel you can enable the tooltip in the constructor.
import $ from 'bootstrap';
import bootstrap from 'bootstrap';
export class TooltipExample {
constructor() {
$('[data-toggle="tooltip"]').tooltip();
}
}

Does Aurelia impact how I style DOM elements with CSS?
No, templates are written in HTML and can be styled using CSS just like any other HTML page.
Where can I learn more about Aurelia?
The best place to learn about Aurelia is through the Aurelia homepage.
Aurelia.io
I there a way of using document.ready in Aurelia?
Where can I use Jquery in the .js files (ViewModels)
** How do the view and viewmodel interact?**
How to get the height of an element within aurelia
 Add a custom footer

 Add a custom sidebar

Clone this wiki locally

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Auto-enable theater mode on YouTube
(function() {
function tryTheater() {
var btn = document.querySelector('button[aria-label="Theater mode"], ytd-player #player button[title="Theater mode"]');
if (btn && !btn.classList.contains('activated')) {
btn.click();
}
}
// Try immediately
tryTheater();
// Try after navigation (SPA)
var lastUrl = location.href;
setInterval(function() {
if (location.href !== lastUrl) {
lastUrl = location.href;
setTimeout(tryTheater, 500);
}
}, 1000);
// Also try on player load
var observer = new MutationObserver(tryTheater);
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
Aurelia FAQ · devuxd/SeeCodeRun Wiki · GitHub
Skip to content
Aurelia FAQ
Jump to bottomEditNew page

David Gonzalez edited this page Oct 28, 2016
·
4 revisions
What is data binding in Aurelia, and when should I use it?
Data binding in Aurelia is the method by which data is exposed from a ViewModel to a View. In typical MVVM (Model-View-ViewModel) fashion, the View talks with the ViewModel who can talk with the Model. But, the View should never talk directly to the Model. Data binding is the means by which the communication occurs between the View and ViewModel, and it should be used whenever data needs to be exposed to the UI.
There are three types of data binding in Aurelia.
  • One-way - Updates made to the ViewModel update the View, but updates to the View do not update the ViewModel
  • Two-way - Updates made to the ViewModel update the View, and vise versa
  • One-Time - Data from the ViewModel is populated into the View when first loaded, but subsequent updates to the ViewModel do not update the View
If you’re interested in a deep dive into how data binding works in Aurelia, check out the following talk from this past December given by Jeremy Danyow.
Aurelia.io Data Binding
I'm reading some data from Firebase and want to update UI whenever it changes. Can I use databinding for that?
Yes, and there is a project called aurelia-firebase that provides an AuthenticationManager and ReactiveCollection class that can be used to simplify interactions with Firebase. Using the ReactiveCollection class you can expose the collection to the View and any updates to the collection will propagate into the view.
Should all clientside data be part of a view model? Or can I store some state separately in a class?
Not necessarily. State can be stored in separate classes that are not exposed as a “view model.” This is pretty common for classes that store configuration or those that are used as a service. For instance, you could choose to do some client side caching of data in a class that is responsible for data access in order to optimize performance.
How does Aurelia interact with UI elements that are not written in Aurelia? I want to use a Bootstrap GUI component. Can I do that?
Templates (views) in Aurelia are just HTML which means they can be styled and include Bootstrap components just like any other HTML page. Aurelia doesn’t depend on Bootstrap or FontAwesome, but both libraries are bundled with the aurelia-navigation-skeleton (starter app) for convenience sake.
In order to include Bootstrap you can install it using jspm and then use the require tag in your template.
<template>
<require from="bootstrap/css/bootstrap.css"></require>
...
</template>

After that's done you're free to use Bootstrap within your HTML as you would normally.
To use Bootstrap's GUI elements like Tooltip and Popover simply add them to your view as you normally would in any other HTML file.
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Aurelia with tooltips!!!">
Tooltip Example
</button>

And then in your ViewModel you can enable the tooltip in the constructor.
import $ from 'bootstrap';
import bootstrap from 'bootstrap';
export class TooltipExample {
constructor() {
$('[data-toggle="tooltip"]').tooltip();
}
}

Does Aurelia impact how I style DOM elements with CSS?
No, templates are written in HTML and can be styled using CSS just like any other HTML page.
Where can I learn more about Aurelia?
The best place to learn about Aurelia is through the Aurelia homepage.
Aurelia.io
I there a way of using document.ready in Aurelia?
Where can I use Jquery in the .js files (ViewModels)
** How do the view and viewmodel interact?**
How to get the height of an element within aurelia
 Add a custom footer

 Add a custom sidebar

Clone this wiki locally

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Remove or un-stick sticky/fixed headers that block content
(function() {
function unstick() {
document.querySelectorAll('header, nav, [role="banner"], .header, .navbar, .sticky, .fixed-top, [style*="position: fixed"], [style*="position:sticky"]').forEach(function(el) {
if (el.style.position === 'fixed' || el.style.position === 'sticky' || getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {
el.style.position = 'static';
el.style.top = 'auto';
el.style.zIndex = 'auto';
}
});
}
unstick();
var observer = new MutationObserver(unstick);
observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });
})();
}
} catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
Aurelia FAQ · devuxd/SeeCodeRun Wiki · GitHub
Skip to content
Aurelia FAQ
Jump to bottomEditNew page

David Gonzalez edited this page Oct 28, 2016
·
4 revisions
What is data binding in Aurelia, and when should I use it?
Data binding in Aurelia is the method by which data is exposed from a ViewModel to a View. In typical MVVM (Model-View-ViewModel) fashion, the View talks with the ViewModel who can talk with the Model. But, the View should never talk directly to the Model. Data binding is the means by which the communication occurs between the View and ViewModel, and it should be used whenever data needs to be exposed to the UI.
There are three types of data binding in Aurelia.
  • One-way - Updates made to the ViewModel update the View, but updates to the View do not update the ViewModel
  • Two-way - Updates made to the ViewModel update the View, and vise versa
  • One-Time - Data from the ViewModel is populated into the View when first loaded, but subsequent updates to the ViewModel do not update the View
If you’re interested in a deep dive into how data binding works in Aurelia, check out the following talk from this past December given by Jeremy Danyow.
Aurelia.io Data Binding
I'm reading some data from Firebase and want to update UI whenever it changes. Can I use databinding for that?
Yes, and there is a project called aurelia-firebase that provides an AuthenticationManager and ReactiveCollection class that can be used to simplify interactions with Firebase. Using the ReactiveCollection class you can expose the collection to the View and any updates to the collection will propagate into the view.
Should all clientside data be part of a view model? Or can I store some state separately in a class?
Not necessarily. State can be stored in separate classes that are not exposed as a “view model.” This is pretty common for classes that store configuration or those that are used as a service. For instance, you could choose to do some client side caching of data in a class that is responsible for data access in order to optimize performance.
How does Aurelia interact with UI elements that are not written in Aurelia? I want to use a Bootstrap GUI component. Can I do that?
Templates (views) in Aurelia are just HTML which means they can be styled and include Bootstrap components just like any other HTML page. Aurelia doesn’t depend on Bootstrap or FontAwesome, but both libraries are bundled with the aurelia-navigation-skeleton (starter app) for convenience sake.
In order to include Bootstrap you can install it using jspm and then use the require tag in your template.
<template>
<require from="bootstrap/css/bootstrap.css"></require>
...
</template>

After that's done you're free to use Bootstrap within your HTML as you would normally.
To use Bootstrap's GUI elements like Tooltip and Popover simply add them to your view as you normally would in any other HTML file.
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Aurelia with tooltips!!!">
Tooltip Example
</button>

And then in your ViewModel you can enable the tooltip in the constructor.
import $ from 'bootstrap';
import bootstrap from 'bootstrap';
export class TooltipExample {
constructor() {
$('[data-toggle="tooltip"]').tooltip();
}
}

Does Aurelia impact how I style DOM elements with CSS?
No, templates are written in HTML and can be styled using CSS just like any other HTML page.
Where can I learn more about Aurelia?
The best place to learn about Aurelia is through the Aurelia homepage.
Aurelia.io
I there a way of using document.ready in Aurelia?
Where can I use Jquery in the .js files (ViewModels)
** How do the view and viewmodel interact?**
How to get the height of an element within aurelia
 Add a custom footer

 Add a custom sidebar

Clone this wiki locally

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Universal Dark Mode - works on any site
(function() {
var enabled = true;
function applyDarkMode() {
if (!enabled) return;
// Create style element if it doesn't exist
var style = document.getElementById('universal-dark-mode-style');
if (!style) {
style = document.createElement('style');
style.id = 'universal-dark-mode-style';
document.head.appendChild(style);
}
// Dark mode CSS - inverts colors but preserves images/video
style.textContent = '
/* Invert everything except media */
html {
filter: invert(1) hue-rotate(180deg) !important;
background: #1a1a2e !important;
}
/* Restore images, videos, iframes, canvas */
img, video, iframe, canvas, svg, picture, [style*="background-image"] {
filter: invert(1) hue-rotate(180deg) !important;
}
/* Preserve specific elements that should not be inverted */
.no-dark-mode, .no-dark-mode *,
[data-theme="light"], [data-theme="light"],
.ace_editor, .ace_editor *,
.CodeMirror, .CodeMirror *,
.monaco-editor, .monaco-editor *,
.markdown-body pre, .markdown-body pre *,
.highlight, .highlight *,
pre code, pre code * {
filter: none !important;
}
/* Fix common UI elements */
.modal, .popup, .dropdown-menu, .tooltip, .popover {
filter: invert(1) hue-rotate(180deg) !important;
background: #2d2d44 !important;
border-color: #444 !important;
}
/* Scrollbars */
::-webkit-scrollbar { background: #1a1a2e !important; }
::-webkit-scrollbar-thumb { background: #444 !important; }
::-webkit-scrollbar-thumb:hover { background: #555 !important; }
/* Selection */
::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }
::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }
';
}
function removeDarkMode() {
var style = document.getElementById('universal-dark-mode-style');
if (style) style.remove();
}
// Toggle with Alt+Shift+D
document.addEventListener('keydown', function(e) {
if (e.altKey && e.shiftKey && e.key === 'D') {
e.preventDefault();
enabled = !enabled;
if (enabled) {
applyDarkMode();
console.log('[Universal Dark Mode] Enabled');
} else {
removeDarkMode();
console.log('[Universal Dark Mode] Disabled');
}
}
});
// Apply on load
applyDarkMode();
// Re-apply on dynamic content
var observer = new MutationObserver(function(mutations) {
if (enabled && !document.getElementById('universal-dark-mode-style')) {
applyDarkMode();
}
});
observer.observe(document.head, { childList: true });
console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');
})();
}
} catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); }
})();
})();
Aurelia FAQ · devuxd/SeeCodeRun Wiki · GitHub
Skip to content
Aurelia FAQ
Jump to bottomEditNew page

David Gonzalez edited this page Oct 28, 2016
·
4 revisions
What is data binding in Aurelia, and when should I use it?
Data binding in Aurelia is the method by which data is exposed from a ViewModel to a View. In typical MVVM (Model-View-ViewModel) fashion, the View talks with the ViewModel who can talk with the Model. But, the View should never talk directly to the Model. Data binding is the means by which the communication occurs between the View and ViewModel, and it should be used whenever data needs to be exposed to the UI.
There are three types of data binding in Aurelia.
  • One-way - Updates made to the ViewModel update the View, but updates to the View do not update the ViewModel
  • Two-way - Updates made to the ViewModel update the View, and vise versa
  • One-Time - Data from the ViewModel is populated into the View when first loaded, but subsequent updates to the ViewModel do not update the View
If you’re interested in a deep dive into how data binding works in Aurelia, check out the following talk from this past December given by Jeremy Danyow.
Aurelia.io Data Binding
I'm reading some data from Firebase and want to update UI whenever it changes. Can I use databinding for that?
Yes, and there is a project called aurelia-firebase that provides an AuthenticationManager and ReactiveCollection class that can be used to simplify interactions with Firebase. Using the ReactiveCollection class you can expose the collection to the View and any updates to the collection will propagate into the view.
Should all clientside data be part of a view model? Or can I store some state separately in a class?
Not necessarily. State can be stored in separate classes that are not exposed as a “view model.” This is pretty common for classes that store configuration or those that are used as a service. For instance, you could choose to do some client side caching of data in a class that is responsible for data access in order to optimize performance.
How does Aurelia interact with UI elements that are not written in Aurelia? I want to use a Bootstrap GUI component. Can I do that?
Templates (views) in Aurelia are just HTML which means they can be styled and include Bootstrap components just like any other HTML page. Aurelia doesn’t depend on Bootstrap or FontAwesome, but both libraries are bundled with the aurelia-navigation-skeleton (starter app) for convenience sake.
In order to include Bootstrap you can install it using jspm and then use the require tag in your template.
<template>
<require from="bootstrap/css/bootstrap.css"></require>
...
</template>

After that's done you're free to use Bootstrap within your HTML as you would normally.
To use Bootstrap's GUI elements like Tooltip and Popover simply add them to your view as you normally would in any other HTML file.
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Aurelia with tooltips!!!">
Tooltip Example
</button>

And then in your ViewModel you can enable the tooltip in the constructor.
import $ from 'bootstrap';
import bootstrap from 'bootstrap';
export class TooltipExample {
constructor() {
$('[data-toggle="tooltip"]').tooltip();
}
}

Does Aurelia impact how I style DOM elements with CSS?
No, templates are written in HTML and can be styled using CSS just like any other HTML page.
Where can I learn more about Aurelia?
The best place to learn about Aurelia is through the Aurelia homepage.
Aurelia.io
I there a way of using document.ready in Aurelia?
Where can I use Jquery in the .js files (ViewModels)
** How do the view and viewmodel interact?**
How to get the height of an element within aurelia
 Add a custom footer

 Add a custom sidebar

Clone this wiki locally