todomvc
Version:
> Helping you select an MV\* framework
167 lines (154 loc) • 4.15 kB
HTML
<html>
<head>
<meta charset="utf-8">
<title>Main</title>
<link rel="stylesheet" href="main.css">
<script type="text/montage-serialization">
{
"owner": {
"properties": {
"element": {"#": "mainComponent"},
"_newTodoForm": {"#": "newTodoForm"},
"_newTodoInput": {"#": "newTodoField"}
}
},
"todoRepetition": {
"prototype": "montage/ui/repetition.reel",
"properties": {
"element": {"#": "todo-list"}
},
"bindings": {
"contentController": {"<-": "@owner.todoListController"}
}
},
"todoView": {
"prototype": "ui/todo-view.reel",
"properties": {
"element": {"#": "todoView"}
},
"bindings": {
"todo": {"<-": "@todoRepetition.objectAtCurrentIteration"}
}
},
"main": {
"prototype": "matte/ui/dynamic-element.reel",
"properties": {
"element": {"#": "main"}
},
"bindings": {
"classList.has('visible')": {
"<-": "@owner.todos.length > 0"
}
}
},
"footer": {
"prototype": "matte/ui/dynamic-element.reel",
"properties": {
"element": {"#": "footer"}
},
"bindings": {
"classList.has('visible')": {
"<-": "@owner.todos.length > 0"
}
}
},
"toggleAllCheckbox": {
"prototype": "native/ui/input-checkbox.reel",
"properties": {
"element": {"#": "toggle-all"}
},
"bindings": {
"checked": {"<->": "@owner.allCompleted"}
}
},
"todoCount": {
"prototype": "montage/ui/text.reel",
"properties": {
"element": {"#": "todo-count"}
},
"bindings": {
"value": {
"<-": "@owner.todosLeft.length"
}
}
},
"todoCountWording": {
"prototype": "montage/ui/text.reel",
"properties": {
"element": {"#": "todo-count-wording"}
},
"bindings": {
"value": {"<-": "@owner.todosLeft.length == 1 ? 'item' : 'items'"}
}
},
"completedCount": {
"prototype": "montage/ui/text.reel",
"properties": {
"element": {"#": "completed-count"}
},
"bindings": {
"value": {
"<-": "@owner.todosCompleted.length"
}
}
},
"clearCompletedContainer": {
"prototype": "matte/ui/dynamic-element.reel",
"properties": {
"element": {"#": "clear-completed-container"}
},
"bindings": {
"classList.has('visible')": {
"<-": "@owner.todosCompleted.length"
}
}
},
"clearCompletedButton": {
"prototype": "native/ui/button.reel",
"properties": {
"element": {"#": "clear-completed"}
},
"listeners": [
{
"type": "action",
"listener": {"@": "owner"},
"capture": false
}
]
}
}
</script>
</head>
<body>
<div data-montage-id="mainComponent">
<section id="todoapp">
<header id="header">
<h1>todos</h1>
<form data-montage-id="newTodoForm">
<input type="text" data-montage-id="newTodoField" id="new-todo" placeholder="What needs to be done?" autofocus="">
</form>
</header>
<section data-montage-id="main" id="main">
<input type="checkbox" data-montage-id="toggle-all" id="toggle-all">
<label for="toggle-all">Mark all as complete</label>
<ul data-montage-id="todo-list" id="todo-list">
<li data-montage-id="todoView"></li>
</ul>
</section>
<footer data-montage-id="footer" id="footer">
<span id="todo-count"><strong data-montage-id="todo-count">0</strong> <span data-montage-id="todo-count-wording">items</span> left</span>
<div data-montage-id="clear-completed-container" id="clear-completed-container">
<button data-montage-id="clear-completed" id="clear-completed">Clear completed (<span data-montage-id="completed-count">0</span>)</button>
</div>
</footer>
</section>
<footer id="info">
<p>Double-click to edit a todo</p>
<p>Created with <a href="http://github.com/montagejs/montage">Montage</a> </p>
<p>Source available at <a href="http://github.com/montagejs/todo-mvc">Montage-TodoMVC</a> </p>
<p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
</footer>
</div>
</body>
</html>