Last active
July 6, 2017 13:01
-
-
Save AStoker/cef4f7e76caff0d99fe6c5a6e91f2a85 to your computer and use it in GitHub Desktop.
Checked binding in nested custom element
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<template> | |
<require from="CustomElement1"></require> | |
Hello world | |
<br /> | |
<custom-element1 items.bind="items" selected.bind="selectedItems"></custom-element1> | |
</template> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
export class App { | |
items = []; | |
selectedItems = []; | |
constructor () { | |
for (let i = 0; i < 5; i++) { | |
this.items.push({ | |
id: i, | |
text: `Item: ${i}` | |
}); | |
} | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<template> | |
<require from="CustomElement2"></require> | |
<label>Custom Element 1</label> | |
<br /> | |
<input value.bind="query" /> | |
<br /> | |
<custom-element2 items.bind="items2"> | |
<template replace-part="item"> | |
<li repeat.for="item of items"> | |
<label click.delegate="select(item, $event)"> | |
<input type="radio" model.bind="item" matcher.bind="matcher" checked.bind="selected"/> | |
${item.text} | |
</label> | |
</li> | |
</template> | |
</custom-element2> | |
<br /> | |
<label>Selected items</label> | |
<ul> | |
<li repeat.for="item of selected">${item.text}</li> | |
</ul> | |
</template> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import {inject, bindable, BindingEngine} from 'aurelia-framework'; | |
@inject(BindingEngine) | |
export class CustomElement1 { | |
@bindable items; | |
@bindable selected; | |
constructor(bindingEngine) { | |
this.query = ''; | |
this.items2 = []; | |
bindingEngine.propertyObserver(this, 'query') | |
.subscribe(this.queryChanged.bind(this)); | |
} | |
bind() { | |
this.items2 = this.items; | |
} | |
select(item, ev) { | |
return true; | |
} | |
matcher(a, b) { | |
console.log(a, b); | |
return a.id === b.id; | |
} | |
queryChanged(newVal) { | |
this.items2 = this.items.filter(i => { | |
return i.text.indexOf(this.query) > -1 ? true : false; | |
}); | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<template> | |
<label>Custom Element 2</label> | |
<ul> | |
<li repeat.for="foo of funkyItems"> | |
<ul> | |
<li replaceable part="item" repeat.for="item of items"> | |
<label> | |
<input type="checkbox" /> | |
${item.text} | |
</label> | |
</li> | |
</ul> | |
</li> | |
</ul> | |
</template> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import {bindable} from 'aurelia-framework'; | |
export class CustomElement2 { | |
@bindable items; | |
funkyItems = []; | |
itemsChanged() { | |
for(let item of this.items) { | |
this.funkyItems.push({ | |
text: 'bla', | |
item: item | |
}); | |
} | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!doctype html> | |
<html> | |
<head> | |
<title>Aurelia</title> | |
<meta name="viewport" content="width=device-width, initial-scale=1"> | |
</head> | |
<body aurelia-app> | |
<h1>Loading...</h1> | |
<script src="https://jdanyow.github.io/rjs-bundle/node_modules/requirejs/require.js"></script> | |
<script src="https://jdanyow.github.io/rjs-bundle/config.js"></script> | |
<script src="https://jdanyow.github.io/rjs-bundle/bundles/aurelia.js"></script> | |
<script src="https://jdanyow.github.io/rjs-bundle/bundles/babel.js"></script> | |
<script> | |
require(['aurelia-bootstrapper']); | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment