console
const template = `
<div class="m-todo">
{#if !username}
Friend, please <a href='#' class="btn btn-default" on-click={this.login()}>Login</a>
{#else}
Welcome, {username} <a href='javascript:;' on-click={username = ''}>Logout</a>
<div class="ui fluid action input">
<input type="text" r-model={draft}>
<button class="ui button" on-click={this.add(draft)}>Post</button>
</div>
<div class="ui green message">you have {todos.length} todos</div>
<ul class="ui list">
{#list todos as todo}
<li class={todo.compeleted? 'compeleted': ''}>
{todo.content} <a href='#' on-click={this.remove(todo_index)}><i class="trash icon"></i></a>
</li>
{/list}
</ul>
{/if}
</div>
`;
const App = Regular.extend({
template,
login: function() {
this.data.username = prompt('input username', '')
return false
},
add: function(draft) {
const data = this.data;
data.todos.push({
content: draft
});
data.draft = '';
},
remove: function(index) {
const data = this.data;
data.todos.splice(index, 1);
return false;
}
});
new App({
data: {
todos: []
}
}).$inject('#demo-view');
<div id="demo-view"></div>
body {
background-color: #eee;
}
#demo-view {
background-color: #fff;
padding: 20px;
width: 400px;
margin: 20px auto;
}