ember-data-components v1.0.0
ember-data-components
Built with ❤️ in Ember Octane.
A set of components that provides an interface for retrieving records with Ember Data directly from templates.
Live Docs
Installation
ember install ember-data-components
Components
Usage
Find Record
Retrieves a record by its modelName
and id
.
Arguments
@modelName
: (required) Astring
of the singular model name.@id
: (required) A number ofstring
of the model id.@reload
: (optional) Aboolean
. Default is false. Set to true to force reload the model data.@backgroundReload
: (optional) Aboolean
. Default is false. Set to true to download the model in the background.
Block Parameters
data
: Data returned.isLoading
: Aboolean
. Initially is set totrue
. Switches tofalse
when the fetch request is completed.hasError
: A boolean. Initially is set tofalse
. Switches totrue
when there is an error with the fetch request.
Basic example (Makes a [GET]
request to /posts/1
)
<FindRecord
@modelName = "post"
@id = 1
as |post|
>
{{post.title}}
</FindRecord>
Advanced example (Makes a [GET]
request to /posts/1
)
<FindRecord
@modelName = "post"
@id = 1
@reload = true
as |post isLoading hasError|
>
{{#if isLoading}}
// loading post data
{{else if hasError}}
// show error
{{else}}
// show post data
{{/if}}
</FindRecord>
Peek Record
Retrieves a record by its modelName
and id
, without making a network request. This will return the record only if it is already present in the store.
Arguments
@modelName
: (required) Astring
of the singular model name.@id
: (required) A number ofstring
of the model id.
Block Parameters
data
: Data returned.
example:
<PeekRecord
@modelName = "post"
@id = 1
as |post|
>
{{post.title}}
</PeekRecord>
Find All
Retrieves all of the records for a given modelName
.
Arguments
@modelName
: (required) Astring
of the singular model name.@reload
: (optional) Aboolean
. Default is false. Set to true to force reload the model data.@backgroundReload
: (optional) Aboolean
. Default is false. Set to true to download the model in the background.
Block Parameters
data
: Data returned.isLoading
: Aboolean
. Initially is set totrue
. Switches tofalse
when the fetch request is completed.hasError
: A boolean. Initially is set tofalse
. Switches totrue
when there is an error with the fetch request.
Basic example (Makes a [GET]
request to /posts
)
<FindAll
@modelName = "post"
as |posts|
>
{{#each posts as |post|}}
{{post.title}}
{{/each}}
</FindAll>
Advanced example (Makes a [GET]
request to /posts
)
<FindAll
@modelName = "post"
@backgroundReload = true
as |posts isLoading hasError|
>
{{#if isLoading}}
// loading post data
{{else if hasError}}
// show error
{{else}}
{{#each posts as |post|}}
{{post.title}}
{{/each}}
{{/if}}
</FindAll>
Peek All
Retrieves all of the records for a given modelName
that are already loaded into the store, without making a network request.
Arguments
@modelName
: (required) Astring
of the singular model name.
Block Parameters
data
: Data returned.
example:
<PeekAll
@modelName = "post"
as |posts|
>
{{#each posts as |post|}}
{{post.title}}
{{/each}}
</PeekAll>
Query
Retrieves all of the records for a given modelName
with the passed object serialized as query params.
Arguments
@modelName
: (required) Astring
of the singular model name.@params
: Anobject
. Utilizes Ember'shash
helper which takes a list of key-value pairs at invocation time and outputs an object.
Block Parameters
data
: Data returned.isLoading
: Aboolean
. Initially is set totrue
. Switches tofalse
when the fetch request is completed.hasError
: A boolean. Initially is set tofalse
. Switches totrue
when there is an error with the fetch request.
Basic example (Makes a [GET]
request to /posts?filter[name]=Max
)
<Query
@modelName = "post"
@params = (hash
filter = (hash
name = "Max"
)
)
as |posts|
>
{{#each posts as |post|}}
{{post.title}}
{{/each}}
</Query>
Query Record
Retrieves a single record for a given modelName
with the passed object serialized as query params.
Arguments
@modelName
: (required) Astring
of the singular model name.@params
: Anobject
. Utilizes Ember'shash
helper which takes a list of key-value pairs at invocation time and outputs an object.
Block Parameters
data
: Data returned.isLoading
: Aboolean
. Initially is set totrue
. Switches tofalse
when the fetch request is completed.hasError
: A boolean. Initially is set tofalse
. Switches totrue
when there is an error with the fetch request.
Basic example (Makes a [GET]
request to /posts?filter[email]=max@gmail.com&title=Engineer
)
<QueryRecord
@modelName = "post"
@params = (hash
filter = (hash
email = "max@gmail.com"
)
title = "Engineer"
)
as |post|
>
{{post.title}}
</QueryRecord>
Compatibility
- Ember.js v3.8 or above
- Ember CLI v2.13 or above
- Node.js v8 or above
Contributing
See the Contributing guide for details.
License
This project is licensed under the MIT License.
4 years ago