Перед добавлением любого кода, мы можем примерно набросать макет нашего приложения. В текстовом редакторе, создайте новый файл и назовите его index.html. Этот файл будет содержать HTML шаблоны нашего приложения и ссылки на дополнительные ресурсы изображения, стили и JavaScript.
Для начала, добавить следующий текст в index.html:
Откройте index.html в вашем браузере, чтобы убедиться, что все загружаются правильно. Вы должны увидеть приложение TodoMVC с тремя жестко заданными <li> элементами и текстом внутри них для каждой TODO.
Ember.js • TodoMVCДля начала, добавить следующий текст в index.html:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Ember.js • TodoMVC</title> <link rel="stylesheet" href="style.css"> </head> <body> <section id="todoapp"> <header id="header"> <h1>todos</h1> <input type="text" id="new-todo" placeholder="What needs to be done?" /> </header> <section id="main"> <ul id="todo-list"> <li class="completed"> <input type="checkbox" class="toggle"> <label>Learn Ember.js</label><button class="destroy"></button> </li> <li> <input type="checkbox" class="toggle"> <label>...</label><button class="destroy"></button> </li> <li> <input type="checkbox" class="toggle"> <label>Profit!</label><button class="destroy"></button> </li> </ul> <input type="checkbox" id="toggle-all"> </section> <footer id="footer"> <span id="todo-count"> <strong>2</strong> todos left </span> <ul id="filters"> <li> <a href="all" class="selected">All</a> </li> <li> <a href="active">Active</a> </li> <li> <a href="completed">Completed</a> </li> </ul> <button id="clear-completed"> Clear completed (1) </button> </footer> </section> <footer id="info"> <p>Double-click to edit a todo</p> </footer> </body> </html>Соответствующая таблица стилей и фоновое изображение для этого проекта должны быть загружены и размещены в том же каталоге, что и index.html
Откройте index.html в вашем браузере, чтобы убедиться, что все загружаются правильно. Вы должны увидеть приложение TodoMVC с тремя жестко заданными <li> элементами и текстом внутри них для каждой TODO.
Комментариев нет:
Отправить комментарий