Skip to content
This repository has been archived by the owner. It is now read-only.
Permalink
Browse files
fix(depend): fix paged dependencies, move components docs
  • Loading branch information
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.