phoenix-liveview-todo-list-tutorial
phoenix-liveview-todo-list-tutorial copied to clipboard
miscellaneous issues with phx 1.7.11
I wanted to thank you for such a great tutorial, I learn a lot from it! I was using phoenix 1.7.11 and found some issues that are not described in the tutorial and might become an obstacle for a complete beginner
- in Step 2.5 the link for css file was not working I had to go to https://todomvc.com/examples/javascript-es6/dist/ and found needed css file in the sources
- in step 7 "Delete" a Todo item, since we are softly deleting items, I found useful to wrap list items in this block with conditional statement
<ul class="todo-list">
<%= for item <- @items do %>
<%= if item.status != 2 do %>
<li data-id={item.id} class={completed?(item)}>
<div class="view">
<%= if checked?(item) do %>
<input class="toggle" type="checkbox" phx-value-id={item.id} phx-click="toggle" checked />
<% else %>
<input class="toggle" type="checkbox" phx-value-id={item.id} phx-click="toggle" />
<% end %>
<label><%= item.text %></label>
<button class="destroy" phx-click="delete" phx-value-id={item.id}></button>
</div>
</li>
<% end %>
<% end %>
</ul>
So we do not display deleted items
- In Step 9(this was the biggest one, I'm using phoenix 1.7.11 and in new version
Phoenix.Router.Helpersis disabled by default)
We need to change in LiveViewTodoWeb.router() toPhoenix.Router, helpers: trueAlso to useRouter.Helperswe need to alias it insideLiveViewTodoWeb.live_componentandLiveViewTodoWeb.live_viewlike thisalias LiveViewTodoWeb.Router.Helpers, as: Routes
That's all! With all other miscellaneous issues, the code deployed in this repo helps a lot Thank you!