Skip to content

Instantly share code, notes, and snippets.

@BigAB
Last active September 23, 2016 04:28
Show Gist options
  • Save BigAB/4a76e7fac9259500539fcfcbe40400ce to your computer and use it in GitHub Desktop.
Save BigAB/4a76e7fac9259500539fcfcbe40400ce to your computer and use it in GitHub Desktop.
Do we need more stache binding than this?

two-way binding

ParentVM to ChildVM Attr / DOM Attr¹

attribute="{ vmKey }"

one-way parent to child

attribute="{{ vmKey }}"

ParentVM to ChildVM Attr / DOM Attr¹

one-way child to parent

attribute="{ ^vmKey }"

ChildVM Attr to Parent VM¹

expose childVM attr to template scope

attribute="{ *vmKey }"

one-way bound ChildVM to template scope

events

(click)="{ doSomething() }"

When event is triggered on childVM or DOM Element¹ the call expression is called on parentVM or template scope

1: ChildVM Attr / DOM Attr: it will attempt to bind to an attribute on the VM, but if that VM does not have that value, or have it defined (key in vm), it will bind to the DOM attribute. Similarly, event bindings will look for the attribute on the VM and if not found will bind to the DOM element events

The $ prefix

Prefixing an attribute with $ will make it ignore the view model for events and bindings and only use the DOM elements events / attributes.

This will ONLY be necessary if there is a name clash between the view model and the DOM though, as all the other methods will bind to the DOM if the view model does not have a matching attribute/event

two-way binding

$attribute="{ vmKey }"

ParentVM to DO Element Attr (ignore VM)

one-way parent to child

$attribute="{ vmKey }" // one-way bound

Parent VM Attr to DOM Element Attr (ignore VM)

one-way child to parent

$attribute="{ ^vmKey }"

one-way bound DOM Element Attr to Parent VM (ignore VM)

events

($click)="{ doSomething() }"

DOM event call expression on parentVM or template scope (ignore VM)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment