HTML value not changing reactively for embedded docs

1

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.

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

Here’s my helper on how to retrieve the Reactive Parent

 parent: function () {
        //ReactiveVar Object that changes based on next/prev clicks (this works)
        const parentId = Template.instance().currentParentId.get();

        var parent = Parents.findOne({ _id: parentId});

        return parent;
    },

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!

2

So if I understand you well:

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

Does this show a reactively changing name for example?

Can you show your helper?

3

Updated my code to show how the Parent is being updated in the template. And yes - the parent name is being changed reactively. Helper is attached to original question too. I even tried using attributes helpers for the value of the inputs and it still isn’t changing reactively (But: I’ve confired the id is) This is why at this point I think it’s just something strange internally that’s going on here

I’ll be attaching a reprex shortly. Any kind of “Stack Snippet” tool that can be used for Meteor? I.e. to simulate client/server, Mongo, Blaze, etc… Ik MeteorPad used to exist but has been abandoned

4

Edit: I should’ve noted that this only seems to occur while trying to save Children values to DB. I.e

  1. User clicks modal and 1st Parent loads with correct children values in there as HTML input
  2. they overwrite whatever’s in input and hit next/prev
  3. ^ Makes call to DB to save values
  4. next/prev Parent is loaded…but children is still whatever user entered from last screen

Please clone github.com/smohanty92/myapp and use test DB I put in ReadMe. You can see the strangeness going on