流星待办事项的关联列表和任务

Question

I'm building the todo application from the Meteor tutorial and continue it. I'm building some lists based on the task model, but I don't know how to join them and say when I click on one list, I want all the tasks from this one.

For the moment, I have the Tasks.js with:

    'tasks.insert'(text, privacy, priority, listId) {
        ...

        Tasks.insert({
            text,

            listId: listId,

            owner: this.userId,
            username: Meteor.users.findOne(this.userId).username,
        });
    },

Body.js

   Template.body.events({
      'submit .new-task' (event) {
           event.preventDefault();

    const listId = ???

    const target = event.target;
    const text = target.text.value;
    ...
    Meteor.call('tasks.insert', text, privacy, priority, listId);
    ...
},

And then where I display it:

Template.body.helpers({
    tasks() {
        const instance = Template.instance();

        if (instance.state.get('hideCompleted')) {
            return Tasks.find({ checked: { $ne: true } }, { sort: Session.get("sort_order") });
        }
        return Tasks.find({}, { sort: Session.get("sort_order")});
    },

    lists() {
        return Lists.find({}, { sort: { createdAt: -1 } });
    },

I my body.html, I just display each items (lists and tasks) separately. But the problem is I don't know how to make the relation between both ...

Can you help me please ?

Thanks a lot

Answer 1

I see you are already using Session. Basically, you will use a Session variable that tracks what the list the user has selected, and then filter your tasks with that variable.

In your body, where you're displaying your list names, add the list's id as an HTML attribute:

{{#each lists}}
  <a href='#' class='list-name' data-id='{{this._id}}'>
    {{this.name}}
  </a>
{{/each}}

Add an event for clicking on a list name that saves its id to a Session variable:

Template.body.events({
  'click .list-name' (event) {
    event.preventDefault();

    Session.set('listId', event.currentTarget.attr('data-id'))
  }
})

In your tasks helper, filter your query using the Session variable:

return Tasks.find(
  { listId: Session.get('listId') },
  { sort: Session.get("sort_order") }
);

Let me know if anything could be more clear.