Skip to content
This repository has been archived by the owner on Nov 25, 2020. It is now read-only.

Docs/plenty #170

Merged
merged 4 commits into from Feb 22, 2017
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
2 changes: 1 addition & 1 deletion doc/SUMMARY.md
Expand Up @@ -29,5 +29,5 @@
* [Changing css framework](cookbook/changing-css-framework.md)
* [Aliases](cookbook/aliases.md)
* [Auto submit button](cookbook/auto-submit-button.md)
* [Disable rendering](cookbook/disable-rendering.md)
* [Exclude from form](cookbook/exclude-from-form.md)
* [Overriding templates](cookbook/overriding-templates.md)
2 changes: 0 additions & 2 deletions doc/cookbook/disable-rendering.md

This file was deleted.

48 changes: 47 additions & 1 deletion doc/cookbook/element-sorting.md
@@ -1,2 +1,48 @@
# Element sorting
[TBD]
It's possible to change the order in which form elements get rendered by [`<entity-form />`](../component/entity-form.md). The way you'd go about doing this is by using the [`@position()` decorator](../decorators.md#position).

There's very little to explain on the subject, so here's an example that shows you how to use it.

## Example
**entity/person.js**

```js
import {position, inputType} from 'aurelia-form';

export class Person {
@position(2)
lastName;

@position(0)
firstName;

@position(1)
middleName;

@position(3)
@inputType('number')
age;

@position(4)
@inputType('email')
email;
}
```

**page/person.js**

```js
export class SomeViewmodel {
constructor() {
this.person = new Person;
}
}
```

**page/person.html**

```html
<!-- Yes, this renders the entire form. Awesome right!? -->
<entity-form entity.bind="person">
</entity-form>
```
21 changes: 21 additions & 0 deletions doc/cookbook/exclude-from-form.md
@@ -0,0 +1,21 @@
# Exclude from form
It's possible to exclude some specific properties on an entity from being rendered [`<entity-form />`](../component/entity-form.md). The way you'd go about doing this is by using the [`@noRender()` decorator](../decorators.md#norender).

There's very little to explain on the subject, so here's an example that shows you how to use it.

## Example
```js
import {noRender} from 'aurelia-form';

export class User {
@type('number')
@noRender()
id;

username;

password;

email;
}
```
44 changes: 43 additions & 1 deletion doc/cookbook/overriding-templates.md
@@ -1,2 +1,44 @@
# Overriding templates
[TBD]
Aurelia-form uses [aurelia-view-manager](https://aurelia-view-manager.spoonx.org/) to manage views.
This allows us to support multiple css frameworks, and offer the flexibility of supplying your own views.

## Using aurelia-config
Overwriting templates is pretty simple. Here's an example overwriting the view for `<form-radio />`:

```js
// Configure function
export function configure(aurelia) {
aurelia.use
.standardConfiguration()
.plugin('aurelia-config', configure => {
return configure([
'aurelia-form'
// Other plugins
], {
'aurelia-view-manager': {
'spoonx/form': {
map: {
'form-checkbox': 'path/to/your/view.html'
}
}
}
});
});
}
```

## Using view-manager
If for some reason you wish to use the view-manager directly:

```js
export function configure(aurelia) {
aurelia.container.get(ViewManager).configureNamespace('spoonx/form', {
map: {
'form-checkbox': 'path/to/your/view.html'
}
});
}
```

## Resources
You can find more information on configuring your views in the [aurelia-view-manager documentation](https://aurelia-view-manager.spoonx.org/configuration.html#).