These are chat archives for jdubray/sam

30th
Apr 2018
Zach Dahl
@schtauffen
Apr 30 2018 01:12
read your article @foxdonut . going to go through the tut next :thumbsup:
Fred Daoud
@foxdonut
Apr 30 2018 01:14
glad to hear it @schtauffen thanks!
Zach Dahl
@schtauffen
Apr 30 2018 02:33

@foxdonut I gotta hit the hay but got thru 8 and skimmed the rest (will work through them tomorrow evening :)). Initial feeling is that with the nest function, it is impossible for nested components to use state from higher in the tree?

for example, what if both the temperature gauges were to share a "units" value like:

{ units: 'C', temperatures: { air: { value: 22 }, water: { value: 17 } } }
does that pose a challenge within meiosis?
devin ivy
@devinivy
Apr 30 2018 03:20
i believe that is a limitation of nest()ing as described in the tutorial, but i'm sure you can adjust how nesting works in your app if you need it to behave differently :)
Fred Daoud
@foxdonut
Apr 30 2018 12:33

@schtauffen thank you for your feedback, much appreciated.
You asked an excellent question. To address this situation, one solution is to designate a top-level property to contain state that is to be made accessible to all components.
You could call this anything you'd like, as you see best for your use case. I'm using context in this example, but it could be settings, preferences, and so on.
So in this example, context would contain the "units".
Here is the code for the example
The only change is to pass down the context when nesting the view function:

    result.view = function(model) {
      return component.view(Object.assign(
        { context: model.context },
        model[prop])
      );
    };

Then the nested temperature components still have their nested state, but also have access to context, so can display the units with model.context.units.

Now, the top-level model is:
{
    "context": {
        "units": "C"
    },
    "temperatures": {
        "air": {
            "value": 22
        },
        "water": {
            "value": 22
        }
    }
}