todomvc
Version:
> Helping you select an MV\* framework
41 lines (40 loc) • 1.6 kB
HTML
<!-- view mask of "todo" UI widget -->
<markup id="todo">
<div class="todo">
<header class="todo__header">
<h1 class="todo__h1">todos</h1>
<input class="todo__new todo__input" placeholder="What needs to be done?" autofocus="autofocus">
</header>
<section class="todo__main">
<input class="todo__toggle-all todo__input" type="checkbox">
<label class="todo__toggle-label" for="todo__toggle-all">Mark all as complete</label>
<ul class="todo__list">
<markup id="item">
<li class="todo__item {% if completed %}completed{% endif %}" data-id="{{id}}">
<div class="todo__item--view view">
<input class="todo__toggle toggle todo__input" type="checkbox"
{% if completed %}checked="checked"{% endif %}>
<label class="todo__label">{{title}}</label>
<button class="todo__destroy destroy todo__button">
</div>
<input class="todo__item--edit edit todo__input" value="{{title}}">
</li>
</markup>
</ul>
</section>
<footer class="todo__footer">
<span class="todo__count">
<strong data-bind="data:status-items-remaining"></strong>
<span data-bind="data:status-items-remaining-unit"></span> left
</span>
<ul class="todo__filters" data-bind="state:status-filter-selected">
<li><a href="#" data-tag="all">All</a></li>
<li><a href="#" data-tag="active">Active</a></li>
<li><a href="#" data-tag="completed">Completed</a></li>
</ul>
<button class="todo__completed todo__button">
Clear completed (<span data-bind="data:status-items-completed"></span>)
</button>
</footer>
</div>
</markup>