Skip to content

Instantly share code, notes, and snippets.


Including the library

Sadly, elements is not a separate library.

It's just a part of the still in development Stripe.js v3, so the only way to include it is to include the whole script in the page somewhere. There is no bower library, no amd/require/commonjs package of any sort.

This is the only way to include it:


Note: Once you read through this, I recommend at some point watching a video on Vimeo which really helped me

What are components all about.

The general idea behind it is the same one we have behind a web component in general. Right now, in HTML, we have elements. Each element has some sort of behavior and meaning behind it. <p> is a paragraph, <h1> is a header, and they are both meant to work as such. There isn't a lot of behavior tied to thise, but there is to some of the more advanced elements such as <input>, <audio> or <video>.

Components are intended to be something like a new custom HTML element, albeit we use it in our templates, not actual HTML. Still, ti's supposed to be something that encapsulates behavior and presentation of a single UI element, meant to be used for a specific purpose. In this analogy

  • the data we bound to a componet woul

What we have right now

We have a simple, flat file structure with the scripts that need testing named component.js, library.js and helper.js depending on the type of micro-addon. A micro-component additionally has a style.css and a template.hbs, but those are not really tested directly, and would only be tested indirectly, via component.js.

What happens with those files right now is that, when the addon is being consumed in a parent app, there are hooks in the addon's index.js script which cause the files during build time, to get renamed and copied to their proper, ember addon defined locations within the app\ folder of the parent app.

What we would want

I think ideally, we would want a tests.js file within the existing flat file structure. Depending on the type of micro-addon, this file would contain a unit test module either for a component, or a general unit test in case of a library and/or helper.

begedin /
Last active Aug 29, 2015
Implementation techniques used in ember-micro-addon

How is the flat file structure working within an ember-app?

The addon's entry point, index.js is key here.

The addon exposes several hooks during addon/app build-time, several of which are treeForX where X is some part of the app/addon. In our case, depending on the addon type, we hook into one or more of theese hooks, at which point, we restructure and rename the files on the fly, so they're conventionally placed and named by the time the parent app tries to load them.

For components

  • treeForApp moves component.js to app/components/addonName.js
  • treeForTemplate moves template.hbs to app/templates/components/addonName.hbs
View ko.asyncComputed.js
/// <summary>
/// A knockout computed observable that supports async data.
/// To use it, set a function that returns a deferred object, for instance, an AJAX call as the parameter.
/// While using AJAX, if server data isn't in proper format, you can use $.ajax().pipe() to map it correctly.
/// There are two helper observables added to the asyncComputed
/// .inProgress returns true if data is not yet loaded (is currently being loaded)
/// .loaded is the opposite and returns true if data has been loaded
/// </summary>
begedin / paging-code.js
Last active Aug 29, 2015
Simple implementation of paging on a collection in knockout.
View paging-code.js
function Paging(itemSet) {
/// <summary>Component used to apply paging on a provided collection. Requires knockout.</summary>
/// <param name="itemSet" type="ko.observableArray or Array">Collection to apply the paging on.</param>
var self = this; = ko.observable(1); // currently active page, starts from 1 for increased "user friendliness"
self.itemsPerPage = ko.observable(20); // currently selected number of items per page
self.itemsPerPageOptions = [10, 20, 50, 100]; // available options for number of items per page
begedin / ko.scrollTo.js
Created May 8, 2014
ScrollTo binding for knockout
View ko.scrollTo.js
// usage: data-bind="scrollTo: booleanObservable"
// will scroll to this item if observable is true
// made by eselk of stack excahnge:
// found in thread:
ko.bindingHandlers.scrollTo = {
update: function (element, valueAccessor) {
var value = ko.utils.unwrapObservable(valueAccessor());
if (value) {
var scrollParent = $(element).closest("div");
begedin / TouchYCoordinate
Created Nov 21, 2013
Shift the y coordinate of the touch position to work from bottom instead of top.
View TouchYCoordinate
Vector2 touchPos = new Vector2(Gdx.input.getX(), camera.viewportHeight - Gdx.input.getY());
begedin / Camera
Last active Dec 29, 2015
How to set LibGDX Orthographic Camera to start at bottom left.
View Camera
camera = new OrthographicCamera(,;
View ease_example.js
newValue = easeFunction(