SOURCE

console 命令行工具 X clear

                    
>
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;
}

本项目引用的自定义外部资源