Skip to content
Permalink
Browse files

update can-stache-converters demos

  • Loading branch information
Nils Lundquist
Nils Lundquist committed Nov 14, 2019
1 parent 2d0a12a commit bed5164e64c94bc19ce8802a80de7ea5c1a021de
@@ -5,11 +5,10 @@
<body>
<my-demo></my-demo>
<script src="../../node_modules/steal/steal.js" dev-bundle main="@empty">
import { Component } from "can/everything";
import { StacheElement, stacheConverters } from "can/everything";
Component.extend({
tag: "my-demo",
view: `
class MyDemo extends StacheElement {
static view = `
<select value:bind="index-to-selected(this.person, this.people)">
{{# for(name of people) }}
@@ -19,17 +18,18 @@
</select>
<div>
<h2>{{ person }}</h2>
</div>
`,
ViewModel: {
person: {default: "Anne"},
</div>
`;
static props = {
person: { default: "Anne" },
people: {
default: () => [
"Matthew", "Anne", "Wilbur"
]
get default() {
return ["Matthew", "Anne", "Wilbur"];
}
}
}
});
};
}
customElements.define('my-demo', MyDemo);
</script>
</body>
</html>
@@ -1,34 +1,39 @@
<div id="out"></div>
<my-demo></my-demo>
<script src="../../node_modules/steal/steal.js" dev-bundle main="@empty">
import { Component, stacheConverters } from "can";
import { StacheElement, DeepObservable, stacheConverters } from "can";
Component.extend({
tag: "my-demo",
view: `
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>
`,
ViewModel: {
<p>You own: {{ this.ownership }}</p>
`;
static props = {
person: {
default: function(){
type: DeepObservable,
get default() {
return { owns: ["bike"] };
}
},
items: {default: () => ["bike", "car", "sled"]},
ownership: function(){
var list = this.person.owns;
items: {
get default() {
return ["bike", "car", "sled"];
}
},
get ownership(){
const list = this.person.owns;
return list.length ? list.join(" and ") : "nothing";
},
upper: function(item) {
var first = item[0].toUpperCase();
const first = item[0].toUpperCase();
return first + item.substr(1);
}
}
});
};
}
customElements.define('my-demo', MyDemo);
</script>
@@ -28,11 +28,10 @@
</style>
<my-demo></my-demo>
<script src="../../node_modules/steal/steal.js" dev-bundle id="demo-source" main="@empty">
import { Component, stacheConverters } from "can";
import { StacheElement, stacheConverters } from "can";
Component.extend({
tag: "my-demo",
view: `
class MyDemo extends StacheElement {
static view = `
<select multiple values:bind="this.colors" size="7">
<option value="red">Red</option>
<option value="orange">Orange</option>
@@ -47,10 +46,15 @@
{{# for(color of colors) }}
<li>{{ color }}</li>
{{/ for }}
</ul>
`,
ViewModel: {
colors: { default: () => ["green"] }
}
});
</ul>
`;
static props = {
colors: {
get default() {
return ["green"];
}
}
};
}
customElements.define('my-demo', MyDemo);
</script>
@@ -5,28 +5,32 @@
<body>
<my-demo></my-demo>
<script src="../../node_modules/steal/steal.js" dev-bundle main="@empty">
import { Component, stacheConverters } from "can/everything";
import { StacheElement, stacheConverters } from "can/everything";
Component.extend({
tag: "my-demo",
view: `
class MyDemo extends StacheElement {
static view = `
<select value:bind="this.index">
{{# for(person of this.people) }}
<option value="{{ scope.index }}">{{ scope.index }}</option>
{{/ for }}
</select>
<input value:bind="selected-to-index(this.index, this.people)">
`,
ViewModel: {
index: {default: 0},
people: {default: ()=> [
"Matthew", "Anne", "Wilbur"
]}
}
});
`;
static props = {
index: {
get default() {
return 0;
}
},
people: {
get default() {
return ["Matthew", "Anne", "Wilbur"];
}
}
};
}
customElements.define('my-demo', MyDemo);
</script>
</body>
</html>

0 comments on commit bed5164

Please sign in to comment.
You can’t perform that action at this time.