Skip to content
Snippets Groups Projects
store-mixin.rst 4.62 KiB
Newer Older
.. _store-mixin:
Matthieu Fesselier's avatar
Matthieu Fesselier committed
store-mixin
Matthieu Fesselier's avatar
Matthieu Fesselier committed

The store mixin allows to fetch a resource or a container from an URI, and
provides the data to the component.

Used by:
--------

    * :ref:`solid-display <solid-display>`
    * :ref:`solid-form <solid-form>`
    * :ref:`solid-map <solid-map>`
    * :ref:`solid-calendar <solid-calendar>`
    * :ref:`solid-ac-checker <solid-ac-checker>`
Matthieu Fesselier's avatar
Matthieu Fesselier committed


Attributes
----------

Matthieu Fesselier's avatar
Matthieu Fesselier committed
``data-src``
~~~~~~~~~~~~
    The uri of the LDP resource you want to fetch and use in the component.

    Each time this attribute is changed, the data is fetched again.

    When the data has been successfuly fetched, the mixin ask the component to render.

Matthieu Fesselier's avatar
Matthieu Fesselier committed
``nested-field``
~~~~~~~~~~~~~~~~
    The name of the field of the requested resource to
    display. Useful when the source url is auto-generated (for instance,
    with the attribute ``bind-resources``) but you need to display
    another field of this source.

    The example below illustrates how to use nested-field attribute :
        * The ``profile`` is a resource nested in the current resource, it will automatically fetch the ``city``, ``phone``, ``website`` values to display them.
        * The second solid-display shows another way to display the values from a nested resource with dot ``.``.

    .. code:: html

        <solid-display
            data-src="data/list/user-1.jsonld"
            nested-field="profile"
            fields="city, phone, website"
        ></solid-display>

        <solid-display
            data-src="data/list/user-1.jsonld"
            fields="profile.city, profile.phone, profile.website"
        ></solid-display>

.. figure:: ../../_static/images/import_documentation/img-core-examples/nested-field.png
   :alt: nested-field attribute use

Matthieu Fesselier's avatar
Matthieu Fesselier committed
``extra-context``
~~~~~~~~~~~~~~~~~
    The id of the ``<script>`` tag which contains
    the context you want to add for this component. An extra context
    looks like this:

    .. code:: html

        <script id="custom-context" type="application/ld+json">
            { "user": "https://api.test-paris.happy-dev.fr/users/" }
        </script>

    If your ``<script>`` tag has the attribute ``data-default-context``,
    this extra context will be applied on all the components which
    doesn’t have an ``extra-context`` attribute.

Matthieu Fesselier's avatar
Matthieu Fesselier committed
``loader-id``
~~~~~~~~~~~~~
    Id of the loader element you want to display during the loading time.

    Exemple of use : 

    .. code:: html

        <section>
            <h1>Solid-form</h1>
            <div id="form-loader"  >
                Loading&#8230;
            </div>
            <solid-form 
                data-src="https://api.startinblox.com/users/"
                fields= "first_name, last_name, email"
                label-first_name = "First name"
                label-last_name = "Last name"
                label-email = "Email"
                loader-id = "form-loader">
            </solid-form>
        </section>

Alice Poggioli's avatar
Alice Poggioli committed
    .. image:: ./../../_static/images/import_documentation/loader.gif
        :alt: Exemple of loader
Matthieu Fesselier's avatar
Matthieu Fesselier committed
``no-render``
~~~~~~~~~~~~~
Matthieu Fesselier's avatar
Matthieu Fesselier committed
   *Available from version 0.13*

Matthieu Fesselier's avatar
Matthieu Fesselier committed
    While this attribute is present on a component, no data will be fetched.
    This attribute is automatically removed by the router when the component
    is in a view which has been activated.
    This allow to lazy-load components.


``store://`` attribute values
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Matthieu Fesselier's avatar
Matthieu Fesselier committed
   *Available from version 0.13*

    This mixin decode all attribute values starting by ``store://resource``, 
    ``store://container`` or ``store://user`` and replace them by the values fetched 
    from the store.
Matthieu Fesselier's avatar
Matthieu Fesselier committed

    It can be a value fetched from the current resource or the current logged in user (works with ``sib-auth``).

    This example will create a text input filled with the username of the current user:

    .. code:: html

        <solid-form
            data-src="https://api.startinblox.com/circles/"
            fields="user"
            value-user="store://user.username"
        ></solid-form>


    This example will write the name of the circle in the custom field:

    .. code:: html

        <solid-display
            data-src="https://api.startinblox.com/circles/1/"
            fields="custom-field"
            value-custom-field="store://resource.name"
        ></solid-display>

Matthieu Fesselier's avatar
Matthieu Fesselier committed
Events
------

``populate``
~~~~~~~~~~~~
    Fired when the component has rendered.


API
---

- ``component.resource``: returns the Proxy of the current resource
- ``component.resource.clearCache()`` (async): clears the cache of the store for this resource
- ``component.resourceId``: returns the id of the current resource