CODEWITHSUNDEEP
javascriptnode.jsmeteorspacebars
user2402616
user2402616

Reputation: 1563

Meteor embedded documents reactivity

I have a bootstrap modal that will display info about a parent document. The modal then has next/prev buttons that can rotate around a list of parent documents and reactively change the info displayed on the modal. It does this by simply changing a ReactiveVar of the current parent's onClick of next/prev. This works like a charm.

My problem is that each parent shows some child data as well. The child data is an array of embedded documents. And each document's property has some HTML inputs. I'm trying to pre-populate the values of the html inputs. However, I'm finding this does not work. id and foo are properties on the child document(s).

A call to {{parent}} is a Helper method that returns the current parent from MiniMongo. This seems to work fine as the parent's metadata changes reactively.

{{#each parent.childrenArray}}
    <input type="text" id="{{id}}" value="{{foo}}">
{{/each}}

So the issue is that the HTML value does not change. Clicking next will still show the old child's value. I understand there's no reactivity for embedded documents and I'm sure this is the problem. Strangely, upon inspecting, I am in fact seeing the input's id being changed though. Does anybody know the solution to this? Thanks!

This seems to happen when I try to save the children back to the DB. I.e. hitting next/prev should save whatever value users puts into the HTML input before moving on to the next Parent and pre-loading its children

Upvotes: 0

Views: 72

Answers (1)

Christian Fritz
Christian Fritz

Reputation: 21354

If parent is a helper, then I don't think you can use the subscript notation to get its properties, at least not reactively. However you should be able to use this instead:

{{#with parent}}
  {{#each childrenArray}}
    <input {{attributes}}>
  {{/each}}
{{/with}}

Update: The other thing that is probably required is to use an attribute helper. I've also updated the code above to use this.

Template.yourTemplateName.helpers({
  attributes() {
    return {
      type: 'text',
      id: this.id,
      value: this.foo
    };
  }
});

Update 2:

Working "offline" in a git repo by the OP I realized that the modal body was better done as a separate template, such that the data context for that template would change reactively. The part of the code that was at odds is not represented in the question, so read this question and answer with a grain of salt.

Upvotes: 1

Related Questions