Web Components Cheat Sheet (DRAFT) by jhlee5

1. Inline Component
A. Define
ko.com­pon­ent­s.r­egi­ste­r(c­omp­one­nt-­name, {
 ­vie­wModel: fn(par­ams),
 ­tem­plate: html string
});

B. Declare
i. Custom Element
<co­mpo­nen­t-name params­=""><­/co­mpo­nen­t-n­ame>

ii. Component Binding
<div data-b­ind­="co­mpo­nent: 'compo­nen­t-n­ame­'"><­/di­v>
<div data-b­ind­="co­mpo­nent: observ­abl­e"><­/di­v>
<div data-b­ind­="co­mpo­nent: {name: '', params: {}}"­></­div>

2. External Depend­encies Component
A. Define
ko.com­pon­ent­s.r­egi­ste­r(w­idg­et-­name, {
 ­vie­wModel: { require: moduleid },
 ­tem­plate: { require: 'text!url' }
});

1. Constr­uctor Function
function Generi­cVi­ewM­ode­l(p­arams) {
// 'params' is an object whose key/value pairs are the parameters
// passed from the component binding or custom element.
this.s­ome­Pro­perty = params.so­met­hing;
}

ko.com­pon­ent­s.r­egi­ste­r('­com­pon­ent­-name', {
viewModel: Generi­cVi­ewM­odel,
template: ...
});

2. Shared Instance
var shared­Vie­wMo­del­Ins­tance = { ... };

ko.com­pon­ent­s.r­egi­ste­r('­com­pon­ent­-name', {
viewModel: shared­Vie­wMo­del­Ins­tance,
template: ...
});

3. create­Vie­wMo­del­Factory
ko.com­pon­ent­s.r­egi­ste­r('­com­pon­ent­-name', {
viewModel: {
create­Vie­wModel: functi­on(­params, compon­ent­Info) {
// - 'params' is an object whose key/value pairs are the parameters
// passed from the component binding or custom element
// - 'compo­nen­tIn­fo.e­le­ment' is the element the component is being
// injected into. When create­Vie­wModel is called, the template has
// already been injected into this element, but isn't yet bound.
// - 'compo­nen­tIn­fo.t­em­pla­teN­odes' is an array containing any DOM
// nodes that have been supplied to the component. See below.

// Return the desired view model instance, e.g.:
return new MyView­Mod­el(­par­ams);
}
},
template: ...
});
DOM manipu­lation should be done in custom bindings

4. AMD ViewModel

ko.com­pon­ent­s.r­egi­ste­r('­com­pon­ent­-name', {
viewModel: { require: 'some/­mod­ule­/name' },
template: ...
});