Skip to content

Commit

Permalink
Add documentation for .bindings()
Browse files Browse the repository at this point in the history
Closes #68
  • Loading branch information
matthewp committed Aug 16, 2019
1 parent 935b8ad commit 99eca5c
Show file tree
Hide file tree
Showing 2 changed files with 79 additions and 1 deletion.
2 changes: 1 addition & 1 deletion .editorconfig
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,6 @@ indent_size = 4
trim_trailing_whitespace = false
insert_final_newline = true

[{*.json,*.yml}]
[{*.json,*.yml,*.md}]
indent_style = space
indent_size = 2
78 changes: 78 additions & 0 deletions docs/bindings.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,78 @@
@function can-stache-element/lifecycle-methods.bindings bindings
@parent can-stache-element/lifecycle-methods 6

Programmatically instantiate a component

@signature `element.bindings([props])`

Create bindings between an element's properties and parent observables. This is useful when you:

- have complex logic for switching between different components (e.g. routing)

The following defines `HomePage` and `MyApp` components that sets up bindings between them:

```js
class HomePage extends StacheElement {
static props = {
pageId: Number
}
}

class MyApp extends StacheElement {
static view = `{{{component}}}`

static props = {
componentName: String,
pageId: Number,

component: {
get() {
if(componentName === "home") {
return new HomePage().bindings({
pageId: value.from(this, "pageId")
});
}
}
}
}
}
```

@param {Object} [props] Child properties to bind to.
@return {can-stache-element} The StacheElement instance.

@body

## Use

Pass an object of properties to bind to the element. For example:

```js
import {StacheElement, ObservableObject, value} from "can";

const appVM = new ObservableObject({
association: "friend"
});

class MyGreeting extends StacheElement {
static view = `{{greeting}} {{subject}}`

static props = {
greeting: String,
subject: String
}
}
customElements.define("my-greeting", MyGreeting);

const myGreetingInstance = new MyGreeting().bindings({
greeting: "Hello",
subject: value.bind(appVM, "association")
}).render();

console.log( myGreetingInstance );
// logs <my-greeting>Hello friend</my-greeting>

console.log( myGreetingInstance.subject );
// logs "friend"
```
@codepen

0 comments on commit 99eca5c

Please sign in to comment.