van.derive on dynamic child of vanX.reactive

[Rhaoma]

Hi

I'm wondering if it would be possible to call van.derive on dynamically specified objects. Say i have following data structure and all children need to be "reactive" through a van.derive call

this.data = vanX.reactive({
            power: { 
                value: null
            },
            volume: { 
                value: null
            },
           ...
        });`

would it be possible to create a function along the lines of this, where the van state object is passed as a parameter?

    setReactive (variable, callback) {
     //some generel preceeding logic
         van.derive(() => {
            if (!this.data[variable].serverFlag) {
                //not a get request update, therefore post to server
                callback(this.data[variable].value);
            }
            //reset flag
            this.data[variable].serverFlag = false;
        });
    }

the function call would be along the lines of this.setReactive("power", this.setPower.bind(this));

I have played around but not gotten any results. I suspect due to the nature of how construct the inside of the van.derive function or something glaring I have overlooked

Any help is appreciated, and it its merely a question out of interest :)

[Tao-VanJS]

I'm not able to figure out what you tried to do from the pieces of code you just pasted. Specifically:

• serverFlag is not defined in the code.
• setPower is not defined in the code.

Could you provide the full context of the code, what's the actual behavior as well as what's your expected behavior?

[Rhaoma]

yes of course. The samples of code weren't meant to compile. serverFlag is irrelevant in this setting - just a boolean flag used in logic. - it can be disregarded.
What i want to achieve is that when one of the members of this.data e.g power.value is updated, i want the corresponding function this.setPower called with the value of this.data.power.value. E.g for volume.value the "callback" is this.setVolume.

I have many more members of this.data, so copy and pasting the same piece of code with slight modifications seems unnecessarily repetitive
Therefore i wanted a function (setReactive) which i could pass the name of the member of the this.data-structue e.g "power" along with its callback, in this case this.setPower. The setReactive would then execute the statement setting van.derive on the passed member of this.data and thereby the corresponding callback would be called on any change to this.power.value

Hope this clears it up a bit

[Tao-VanJS]

From what you described I see no problems. VanJS should be able to support the use case you described.

[Rhaoma]

That probably means i have made some dumb mistake, but i just noticed that while executing the setReactive function as shown above, didn't seem to work (it never got called upon updates to values), adding a console.log(this.data[variable].value); line at the top of van.derive as seen below fixes everything

  setReactive (variable, callback) {
         van.derive(() => {
            console.log(this.data[variable].value);  //<-- the addition of this line makes it all work for some weird reason
            if (!this.data[variable].serverFlag) {
                //not a get request update, therefore post to server
                callback(this.data[variable].value);
            }
            //reset flag
            this.data[variable].serverFlag = false;
        });
    }

This is total unfounded speculation but might it be that on my first call to van.derive the boolean serverFlag is true/set, and therefore the code skips the callback part. This would result in van not registering the dependency I imagine.
I don't know if there is a better way to skip the immediate/first call to van.derive

[Tao-VanJS]

Your guess is right. If serverFlag is false, the then branch of the if statement won't be executed thus this.data[variable].value won't be accessed and registered as a dependency of the derivation. Whenever you turn serverFlag to true, this.data[variable].value will be accessed and registered as the dependency of the derivation.

[Tao-VanJS]

Actually, I found something weird in your code: why are you setting serverFlag inside your derivation?

If you set serverFlag inside the derivation, it won't be registered as a dependency of the derivation to avoid circular dependency. You can refer to the release notes of VanJS 1.3.0. As a result, turning serverFlag to true won't trigger the derivation and callback will never be called.

[Rhaoma]

Yes I'm aware. It's because serverFlag isn't a reactive object. Actually it's part of the this.data structure, but encapsulated in a van.noreactive statement. I omitted this in the question just to avoid unnecessary confusion, but that might not have been wise

Another question though. Would it be possible to register the dependency but not execute the callback/codeblock inside van.derive when registering? Sort of a side question

[Tao-VanJS]

Yeah, that's definitely possible!

As you just demonstrated, having the line console.log(this.data[variable].value) will simply register the dependency. An even easier (and more common) approach is to just have this.data[variable].value in the line.

[Rhaoma]

Yes of course, thank you