can
Version:
MIT-licensed, client-side, JavaScript framework that makes building rich web applications easy.
62 lines (58 loc) • 1.36 kB
HTML
<body>
<style>
.editing {
font-weight: bold;
}
</style>
<div id='out'></div>
<div id="demo-html">
<script id="player-list-stache" type="text/stache">
<ul>
{{#each players}}
<li {{#isEditing(.)}}class="editing"{{/isEditing}}
($click)='editPlayer(.)'>{{name}}</li>
{{/each}}
</ul>
<player-edit
(close)="removeEdit()"
{player}="editingPlayer"/>
</script>
<script id="player-edit-stache" type="text/stache">
{{#if player}}
<input {($value)}="player.name"/>
<button ($click)="close()">X</button>
{{/if}}
</script>
</div>
<script src="../../node_modules/steal/steal.js" main="@empty" id='demo-source'>
import Component from "can/component/";
import stache from "can/view/stache/";
import $ from "jquery";
can.Component.extend({
tag: "player-list",
template: can.view('player-list-stache'),
viewModel: {
players: new can.List([{name: "Justin"},{name: "Brian"}]),
editPlayer: function(player){
this.attr("editingPlayer", player);
},
removeEdit: function(){
this.removeAttr("editingPlayer");
},
isEditing: function(player){
return this.attr("editingPlayer") === player;
}
}
});
can.Component.extend({
tag: "player-edit",
template: can.view('player-edit-stache'),
viewModel: {
close: function(){
this.dispatch("close");
}
}
});
$("#out").html(stache("<player-list/>")({}));
</script>
</body>