can/demos/can-stache-converters/input-checkbox.html

MIT-licensed, client-side, JavaScript framework that makes building rich web applications easy.

<div id="out"></div>
<my-demo></my-demo>
<script src="../../node_modules/steal/steal.js" dev-bundle main="@empty">
import { StacheElement, DeepObservable, stacheConverters } from "can";

class MyDemo extends StacheElement {
	static view = `
		{{# for(item of this.items) }}
			<label>
				<input type='checkbox' checked:bind='boolean-to-inList(item, this.person.owns)' />
				{{ upper(item) }}
			</label>
		{{/ for }}
		<p>You own: {{ this.ownership }}</p>
	`;
	static props = {
		person: {
			type: DeepObservable,
			get default() {
				return { owns: ["bike"] };
			}
		},
		items: {
			get default() {
				return ["bike", "car", "sled"];
			}
		},
		get ownership(){
			const list = this.person.owns;
			return list.length ? list.join(" and ") : "nothing";
		},
		upper: function(item) {
			const first = item[0].toUpperCase();
			return first + item.substr(1);
		}
	};
}
customElements.define('my-demo', MyDemo);
</script>