Conditional rendering in LiveView template

If you updated live view, make sure to rm -rf node_modules && npm install again, sometimes it doesn’t pick up changes.

Unfortunately, that didn’t help.

The following code “fixes” the problem (I could make that paragraph tag hidden). But… I wonder why this is happening at all and what exactly changed after the update. Went through the changelog in LiveView (I was running 0.10.0 prior to updating to 0.12.1), but found nothing related to my issue.

<p><%= length(@users) %></p>
<%= if length(@users) > 0 do %>
...
<% end %>

You shouldn’t to length like this. This will always iterate and count the full list.

Use something like match?([_|_], @users) instead.

That’s a great tip, thank you!

Enum.any?(@users) is probably more idiomatic. But none of that should affect whether or not the page updates. @kminevskiy be sure to check the rendered page for HTML validity, if the HTML is invalid this can negatively affect morphdom’s ability to handle updates.

Can you provide more code? Maybe IO.inspect(@users) in the template and see if the output is what you expect?

Thanks for your suggestions.

I remember a few days ago, after I updated the LiveView package, I started the app as usual and was surprised that I couldn’t see the form. Spent some time and through trial and error I found that weird behavior.

IO.inspect(@users) returns a list of maps. Nothing special about it. Plus, I don’t render it in the form - I simply check the length of it and render the form based on the length.

You can put an IO.inspect or something in your form template to make sure it’s called. If it isn’t, one thing to check is that your rendering function is pure, it shouldn’t load users from DB for instance, otherwise Phoenix’s change tracking can’t tell that it changed and won’t re-render it. It still worked on 0.10 but 0.11 is better optimized so it actually matters now.

(BTW, there’s an Enum.empty? function - for lists it checks if list == [] which is as efficient as it gets)

If I put IO.inspect inside the template, it does properly return a list of users (and it gets updated on events). So the list is populated correctly. I guess I’ll keep digging and trying things.

Maybe you could try the master branch. I encountered a fairly similar problem with content disappearing that Chris McCord has fixed on the master branch. I think it is this changelog entry: “Fix component innerHTML being discarded when a sibling DOM element appears above it, in cases where the component lacks a DOM id”

I was looking at that fix a few minutes ago. I’ll update to 0.12.1 and report back.