Skip to content

Instantly share code, notes, and snippets.

@itsmebasti
Last active Dec 11, 2018
Embed
What would you like to do?
Lightning Value Provider
<aura:application >
<!-- Value Providers -->
<c:XYZ context="{!this}" />
<c:valueProvider context="{!this}" name="X" values="{Y: 'y', Z:'z'}" />
<!-- Events -->
<aura:handler name="init" value="{!this}" action="{!c.doInit}" />
<!-- Markup -->
<!-- Note: this is how simple you can use the values in the markup -->
{!XYZ.FOO}
{!XYZ.BAR}
<br />
{!X.Y}
{!X.Z}
</aura:application>
({
doInit: function(cmp, evt, hlp) {
// Note: this is how simple you use it in your context component (or app)
console.log(XYZ.FOO);
console.log(X.Y);
// Note: this is how you could also see the markup value provider.
console.log(cmp.get("XYZ.BAR"));
},
})
<aura:component extensible="true" >
<aura:attribute name="name" type="String" required="true" />
<aura:attribute name="values" type="Map" required="true" />
<aura:attribute name="context" type="Map" required="true"/>
<!-- Events -->
<aura:handler name="init" value="{!this}" action="{!c.doInit}" />
</aura:component>
({
doInit: function(cmp, evt, hlp) {
const providerName = cmp.get("v.name");
const values = cmp.get("v.values");
// Note: add the markup porvider to the context component
cmp.get("v.context").addValueProvider(providerName, {
get: (key) => values[key]
});
// Note: add the javascript provider to the window
Object.defineProperty(window, providerName, {
writable: true,
value: values
});
},
})
<aura:component extends="c:valueProvider">
<aura:set attribute="name" value="XYZ" />
<aura:set attribute="values" value="{FOO:'Foo', BAR: 'Bar'}" />
</aura:component>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment