phoenix-liveview-todo-list-tutorial icon indicating copy to clipboard operation
phoenix-liveview-todo-list-tutorial copied to clipboard

miscellaneous issues with phx 1.7.11

Open AntonProLysenko opened this issue 1 year ago • 0 comments

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

  1. 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
  2. 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

  1. In Step 9(this was the biggest one, I'm using phoenix 1.7.11 and in new version Phoenix.Router.Helpers is disabled by default)
    We need to change in LiveViewTodoWeb.router() to Phoenix.Router, helpers: true Also to use Router.Helpers we need to alias it inside LiveViewTodoWeb.live_component and LiveViewTodoWeb.live_view like this alias LiveViewTodoWeb.Router.Helpers, as: Routes

That's all! With all other miscellaneous issues, the code deployed in this repo helps a lot Thank you!

AntonProLysenko avatar Mar 05 '24 22:03 AntonProLysenko