Ятобы добавить форму для создания новых todo и сделать отметку о уже выполненных мы внесём изменения в наш шаблон index.html.erb.
Поменяйте первую строку – ту, что с <%= @todos.size %> – следующим кодом:
`
Todos: <%= @todos.size %>
`Это добавит форму для добавления новых todo.
Эта форма делает POST запросы к /todos в нашем приложении. Rails использует HTTP-метдоы для маршрутизации запросов от пользователей. Вы можете видеть какие маршруты к каким контролерам и действиям и с какими HTTP-method, просто запустив (**):
rake routes
Форма также содержит скрытый инпут с названием authenticity_token, он будет добавлять токен к данным, которые отправляет форма для подтверждения, что они идут от нашего приложения.
После сохранения шаблона, перейдите в браузер и обновите http://DOCKER_IP:3000/todos. Вы должны увидеть форму и она должна работать и создавать новые todo!
Теперь мы поменяем вид списков todos немного используя semantic-ui-css классы и заставим всё работать добавив немного JavaScript.
В шаблоне поменяйте <ul> и всё остальное в нём на следующее:
`
-
<div class="ui checkbox"> <input type="checkbox" data-id="<%= todo.id %>"<%= todo.done ? ' checked="checked"' : '' %>> <label><%= todo.description %></label> </div> </li><% end %>
<% @todos.each do | todo | %>
Теперь todos содержит также чекбоксы и классы для улучшения внешнего вида.
Чекбоксы используют аттрибут “done” в Todo, чтобы знать отмечен он сделанным или нет. Мы перейдём к этому на следующем этапе. Перед этим мы добавим чуть-чуть JavaScript к application.js для создания и обновления наших todos делая запрос в фоне:
`$(document).ready(function () {
$(’#todo-list input[type=“checkbox”]’).on(‘click’, function (event) { $.ajax({ url: ‘/todos/’ + $(event.target).data(‘id’), method: ‘put’, data: { todo:{ done: event.target.checked } } }); });
});`
Убедитесь, что вы добавили это после первого блока комментариев. Запрос также использует аттрибут “done”. Мы должны теперь его развернуть и разрешить.