https://github.com/socketcluster/ag-model
SocketCluster model component for the front end
https://github.com/socketcluster/ag-model
Last synced: about 2 months ago
JSON representation
SocketCluster model component for the front end
- Host: GitHub
- URL: https://github.com/socketcluster/ag-model
- Owner: SocketCluster
- Created: 2019-03-12T19:38:23.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2025-03-04T16:11:52.000Z (about 1 year ago)
- Last Synced: 2025-03-27T11:12:20.890Z (about 1 year ago)
- Language: JavaScript
- Homepage:
- Size: 72.3 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# AGModel
SocketCluster real-time model component for reactive front ends.
Designed to work with `ag-crud-rethink` https://github.com/SocketCluster/ag-crud-rethink
## Setup
Inside the directory from which front end files are served, run the command:
```bash
npm install ag-model --save
```
You can import it in your scripts like this (example; your exact path may differ):
```js
import AGModel from '/node_modules/ag-model/ag-model.js';
```
## Usage
See https://github.com/SocketCluster/ag-crud-sample for sample app which demonstrates this component in action.
An AGModel object can be instantiated like this:
```js
this.productModel = new AGModel({
// Pass the SocketCluster client socket object.
socket: pageOptions.socket,
type: 'Product',
id: this.productId,
fields: ['name', 'qty', 'price', 'desc']
});
```
The AGModel allows you to read and manipulate a single documents in RethinkDB from the front end.
The ```productModel.value``` property is a `Product` object; this object updates in real-time to match the associated resource on the server.
If using a reactive front end framework like VueJS, you can bind the ```productModel.value``` property directly to your template since the object reference never changes (only the internal properties change).
In VueJS, you can instantiate and attach the model value to your component like this:
```js
data: function () {
this.productModel = new AGModel({
socket: pageOptions.socket,
type: 'Product',
id: this.productId,
fields: ['name', 'qty', 'price', 'desc']
});
return {
product: this.productModel.value
};
},
```
Then you can bind this data to your template like this:
```html
// Render available properties of the product.
{{product.id}}
{{product.name}}
{{product.qty}}
{{product.price}}
{{product.desc}}
```
## Supported attributes
The AGModel tag supports the following attributes:
- ```socket```: An ```socketcluster-client``` socket; note that the same global socket object can be shared between multiple AGCollection and AGModel instances.
- ```type```: This is the model/table name in RethinkDB.
- ```id```: The id of the resource/document which this model represents.
- ```fields```: The document fields to load for this model.