Action in child element is not triggered without page refresh

[Slawikus]

Hi there! I haven't found a link to Slack or Discord channel where one can post questions regarding Django Unicorn, and filing GitHub Issues is also not the right place for questions and explanations. Hopefully, this is the right place.

I am trying to learn Unicorn and Todo list project is a good starting point. What I wanted to accomplish is to create todo, list todos and delete todo. I've put everything into one component and all works perfectly. Here is what I have:

Model:

class Todo(models.Model):
    description = models.CharField(max_length=50)
    is_completed = models.BooleanField(default=False, blank=True)
    due_date = models.DateField(null=True, blank=True)

Unicorn component:

from django_unicorn.components import UnicornView

from todos.models import Todo


class TodoListView(UnicornView):
    todos = Todo.objects.none()
    description = None

    def hydrate(self):
        self.load_todos()

    def add(self):
        Todo.objects.create(description=self.description)
        self.description = None

    def delete(self, id):
        self.todos.get(pk=id).delete()

    def load_todos(self):
        self.todos = Todo.objects.all()

And component template:

<div>
  <input unicorn:model="description" id="description" type="text">
  <button unicorn:click="add">Add Todo</button>

  <ul>
    {% for todo in todos %}
      <li>
        ({{ todo.id }}) - {{ todo.description }} - <button unicorn:click="delete({{ todo.id }})">Delete</button>
      </li>
    {% endfor %}
  </ul>
</div>

Now I though - great, time to extract some child components and I've started with extracting a component for adding new todos. No a big deal, here is a template for 'add-todo' component:

<div>
  <input unicorn:model="description" id="description" type="text">
  <button unicorn:click="add">Add Todo</button>
</div>

And unicorn component associated with it:

from django_unicorn.components import UnicornView

from todos.models import Todo


class AddTodoView(UnicornView):
    description = None

    def add(self):
        Todo.objects.create(description=self.description)
        self.description = None
        self.parent.load_todos()

Component is hooked into the parent component via

{% load unicorn %}

<div>
  {% unicorn 'add-todo' parent=view %}

  <ul>
    {% for todo in todos %}
      <li>
        ({{ todo.id }}) - {{ todo.description }} - <button unicorn:click="delete({{ todo.id }})">Delete</button>
      </li>
    {% endfor %}
  </ul>
</div>

and here when todo is added I am triggering the parent's component method to reload all todos. So far so good, all works just fine. Well, almost. When the new entry is added indeed it is shown in the list of all todos. But when I try to click "Delete" button on this newly added todo item nothing happens at all, no actions are triggered. But if I would refresh the page - all works just fine, and all items can be deleted including the newly created one.

Question is - what am I doing wrong?

And now the funny thing - if I would move the newly created AddTodo component into the bottom of the page, like so:

{% load unicorn %}

<div>
  <ul>
    {% for todo in todos %}
      <li>
        ({{ todo.id }}) - {{ todo.description }} - <button unicorn:click="delete({{ todo.id }})">Delete</button>
      </li>
    {% endfor %}
  </ul>

  {% unicorn 'add-todo' parent=view %}
</div>

the behaviour changes:
a) If I would add only one single new todo item and click Delete action is triggered! But the list is not rerendered until I will start typing something in the add todo input field.
b) if I would add two or more todo items and Click delete - action is triggered on both of them and list is re-rendered.

I am totally confused :) and hope somebody can help me out to understand what is the problem and what is wrong with the way I am approaching it.

P.S. I have created a branch with the source code if one would like to check it out: https://github.com/Slawikus/django-unicorn-todo/tree/unicorny

[adamghill]

haven't found a link to Slack or Discord channel where one can post questions

Since this is a side project, I'm trying to keep things manageable and just keep everything asynchronous and in GitHub. I also assumed if there was a Discord channel I would be the only person ever in there!

But when I try to click "Delete" button on this newly added todo item nothing happens at all, no actions are triggered.

My guess is that action events are not getting re-initialized when the child component re-renders. My example for child components (https://github.com/adamghill/django-unicorn/blob/bc721212561d03a5be34b3bf866146495161d955/example/www/templates/www/nested.html) only filters and edits existing pieces of data, so I will need to look into why this is happening. Sorry!

action is triggered on both of them
Not sure about that first issue, but for this second one where the action is triggered on both, I think I might know. As I was fixing issue #168, I noticed a bug with how events are attached for models where there are some instances where events will sometimes be duplicated. I have half of a fix for it right now, but it's a pretty drastic change to how the events are all wired up so it will probably take a little while and I want to make sure I don't break anything in the process.

Once I fix the #168 bug and the event attachment issue I mentioned, I'll use your branch and see what I can fix up. The child component code is some of the most complicated in Unicorn already, but hopefully I can make it work as expected.

[Slawikus]

Thanks, Adam, for the reply!

Clear regarding Discord - makes sense, but I am sure soon it'll grow! And there will be few people who can help out besides you.

Regarding "action is triggered on both of them" - my mistake, I haven't clearly described. In fact, this was the scenario where everything was working correctly, and I meant that not when you click on one another one is deleted as well, I meant that delete works as expected on each of them. Sorry about that! I am afraid those issues are not related.

[philippe-docourt]

I ended up on this page while trying to figure out how to dynamically add/remove child component to/from a parent. I am facing the same issue described by @Slawikus with the delete action doing nothing, except for the very first item. Any update?