Permalink
Browse files

fix(depend): fix paged dependencies, move components docs

  • Loading branch information...
VMBindraban
VMBindraban committed Jun 8, 2016
1 parent 23df688 commit 89b5b35a182c895104c3b23b74bedfb48f1d98ee
Showing with 33 additions and 112 deletions.
  1. +30 −11 doc/components.md
  2. +1 −100 src/component/README.md
  3. +2 −1 src/component/paged.js
@@ -1,9 +1,7 @@
# Components
Aurelia-orm comes bundled with some (at the time of writing just one) components to simplify working with entity data.
Aurelia-orm comes bundled with some components to simplify working with entity data.
## association-select
> The `<association-select />` component composes a `<select />` element, of which the options have been populated from an endpoint.
**Basic example**
@@ -50,22 +48,18 @@ Aurelia-orm comes bundled with some (at the time of writing just one) components
Following are all attributes, and how they work.
### value
This is the selected value of the element. This functions the same as a regular `<select />` would.
### property
This tells the component which property to use from the data sent back by the resource (using the repository). **Defaults to `name`**.
### repository
This tells the component where it can find the data to populate the element. This is a simple `EntityManager.getRepository('resource')`.
### association
Add the association to the criteria, and listen for changes on the association so it can update when it does.
_This attribute accepts arrays, and can be combined with the `manyAssociation` attribute_.
*This attribute accepts arrays, and can be combined with the `manyAssociation` attribute*.
This roughly translates to:
@@ -74,11 +68,36 @@ repository.find({association: association.id});
```
### manyAssociation
Almost exactly the same as the `association` attribute, except for a `many` association. This will look up the data from the association's side.
Almost exactly the same as the `association` attribute, except for a `many` association. This will look up the data from the association's side.
_This attribute does **not** accept arrays, but can be combined with the `association` attribute_.
### criteria
Pass along filter criteria to the element. These will be used to restrict the data returned from the API.
## Paged
Paged component for aurelia. Allows you to display paged information.
### resource
A repository, simple `EntityManager.getRepository('resource')`.
### criteria (optional)
Parameter gets passed straight to the query field of `.find()`.
### limit (optional)
This will determine the amount of items to fetch, default is 30.
### page (optional)
Which page to load.
### Example:
```html
<paged resource.bind="userRepository" limit.bind="30" data.bind="data">
<div class="user" repeat.for="user of data">
${user.id} - ${user.name}
</div>
</paged>
```
@@ -1,103 +1,4 @@
# Components
Aurelia-orm comes bundled with some components to simplify working with entity data.
## association-select
> The `<association-select />` component composes a `<select />` element, of which the options have been populated from an endpoint.
**Basic example**
```html
<association-select
value.bind="data.author"
repository.bind="userRepository"
></association-select>
```
**Extended example**
```html
<!-- First, populate a list of categories -->
<association-select
value.bind="data.category.id"
repository.bind="categoryRepository"
></association-select>
<!-- Then populate a list of pages -->
<association-select
value.bind="data.page.id"
repository.bind="pageRepository"
></association-select>
<!-- Then populate a list of groups -->
<association-select
value.bind="data.group.id"
repository.bind="groupRepository"
></association-select>
<!-- And finally, populate a list of authors based on the previous selects -->
<association-select
value.bind="data.author.id"
repository.bind="userRepository"
property="username"
association="[data.page, data.group]"
manyAssociation="data.category"
criteria="{age:{'>':18}}"
></association-select>
```
Following are all attributes, and how they work.
### value
This is the selected value of the element. This functions the same as a regular `<select />` would.
### property
This tells the component which property to use from the data sent back by the resource (using the repository). **Defaults to `name`**.
### repository
This tells the component where it can find the data to populate the element. This is a simple `EntityManager.getRepository('resource')`.
### association
Add the association to the criteria, and listen for changes on the association so it can update when it does.
*This attribute accepts arrays, and can be combined with the `manyAssociation` attribute*.
This roughly translates to:
```javascript
repository.find({association: association.id});
```
### manyAssociation
Almost exactly the same as the `association` attribute, except for a `many` association. This will look up the data from the association's side.
_This attribute does **not** accept arrays, but can be combined with the `association` attribute_.
### criteria
Pass along filter criteria to the element. These will be used to restrict the data returned from the API.
## Paged
Paged component for aurelia. Allows you to display paged information.
### resource
A repository, simple `EntityManager.getRepository('resource')`.
### criteria (optional)
Parameter gets passed straight to the query field of `.find()`.
### limit (optional)
This will determine the amount of items to fetch, default is 30.
### page (optional)
Which page to load.
### Example:
```html
<paged resource.bind="userRepository" limit.bind="30" data.bind="data">
<div class="user" repeat.for="user of data">
${user.id} - ${user.name}
</div>
</paged>
```
For more information go to the [components docs](https://github.com/SpoonX/aurelia-orm/blob/master/doc/components.md).
@@ -1,4 +1,5 @@
import {bindable, customElement, bindingMode} from 'aurelia-framework';
import {bindingMode} from 'aurelia-binding';
import {bindable, customElement} from 'aurelia-templating';
@customElement('paged')
export class Paged {

0 comments on commit 89b5b35

Please sign in to comment.