https://github.com/scriptnull/sails-viewify
Convert your sails models into views.
https://github.com/scriptnull/sails-viewify
html sails sails-model sailsjs
Last synced: 11 months ago
JSON representation
Convert your sails models into views.
- Host: GitHub
- URL: https://github.com/scriptnull/sails-viewify
- Owner: scriptnull
- License: mit
- Created: 2015-01-17T16:02:46.000Z (about 11 years ago)
- Default Branch: master
- Last Pushed: 2016-03-01T16:19:20.000Z (about 10 years ago)
- Last Synced: 2024-04-14T11:05:23.670Z (almost 2 years ago)
- Topics: html, sails, sails-model, sailsjs
- Language: JavaScript
- Size: 16.6 KB
- Stars: 10
- Watchers: 4
- Forks: 5
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# sails-viewify
[](https://www.npmjs.com/package/sails-viewify)
[](https://www.npmjs.com/package/sails-viewify)
[](https://github.com/scriptnull/sails-viewify/blob/master/License.md)
[](https://gitter.im/scriptnull/sails-viewify)
``sails-viewify`` is a tool for reusing your [sails models](http://sailsjs.org/#/documentation/reference/waterline/models) to build your [sails views](http://sailsjs.org/#/documentation/concepts/Views) rapidly.It is specifically suited for building web apps that often involve generating HTML forms.
> NOTE : sails-viewify is a helper module for the [sails](npmjs.com/package/sails) project.If you don't know what it is , first go ahead and see [sails](npmjs.com/package/sails).
## Install
Install sails-viewify from npm.
```bash
npm install -g sails-viewify
```
## Example
Let us consider that you have a model called User.
```javascript
module.exports = {
attributes: {
fname : {
type : 'string'
},
lname : {
type : 'string'
},
salary : {
type : 'integer'
}
}
};
```
Your obvious need might be creating a view that collects/exhibits the data for the model. In this case , your view may look like
```html
First Name
Last Name
Salary
```
In this case , you only have 3 fields , but think of a situation
- where your model has about some 30 attributes.
- where you use some more tags and CSS classes to follow a uniform design throughout your project
You may feel tired of copying and pasting a template of html ( in this case , a label and input tag ) repeatedly and modify its name,id and value attributes each time by refering to the attribute name in the model's file.
What if we write our model and try to generate these fields for us based on the type of the attribute. Yeah ! This is what sails-viewify does !
You could use frontend frameworks like [angular.js](https://angularjs.org) to do this.But there may be cases where you want to write the html code manually in order to keep a check on some minor details. ``sails-viewify`` serves this purpose.
## How To Use
Create and navigate to your sails project. Go ahead and create your models and controllers.
```bash
sails new myproject
cd myproject
sails generate model User
sails generate controller User
```
Install sails-viewify globally.
```bash
npm install -g sails-viewify
```
Initialize sails-viewify in the sails project by executing the following command.
```bash
sails-viewify init
```
This creates two files namely ,
- ``config/sails-viewify.js`` - Has the configuration details.
- ``viewify_input.txt`` - Refer ```sails-viewify escape```(extended use) for usage.
Next step is configuring your ``sails-viewify.js`` config file.
```javascript
module.exports = {
template: [
{
type: 'text' ,
htmltext: '
type of {{name}} is {{type}}
\n',
specials: [
{
text: '{{name}}' ,
replacer: 'name'
},
{
text: '{{type}}' ,
replacer: 'type'
}
]
}
]
};
```
- ``template`` - [array] specifies templates to be used for different types of attributes. Note that the type refers to the types used in the model and are available within [waterline](npmjs.com/package/waterline).
- ``type`` - [string] specifies the type of the attributes used in the model.
- ``htmltext`` - [string] specifies the html text to be generated for the respective attribute type.
- ``specials`` - [array] specifies the special text in the ``htmltext`` field to be replaced by the respective replacer object value
- ``text`` - [string] special text that is to be replaced by the values from the model.
- ``replacer`` - [string] replacer object points to the property of the attribute's object in the model. By default , sails-viewify creates name property which equals the name of the attribute in the model.Other than this , all the properties of the attribute are available.
That's it ! You are ready to generate your view . go ahead and execute
```bash
sails-viewify modelname viewname
sails-viewify User UserDetails.ejs
```
Now, the view named UserDetails.ejs can be found in your views folder.
```html
type of fname is string
type of lname is string
type of salary is integer
```
##### Extended Use
Lets say , you want to add an id field to each p tag.Then your htmltext in ``config/sails-viewify.js`` would look like
```javascript
htmltext : "
type of {{name}} is {{type}}
" //invalid
```
The above seen snippet is invalid since the double quotation marks inside the html are not escaped.So the valid syntax would be
```javascript
htmltext : "
type of {{name}} is {{type}}
" //valid
```
``sails-viewify`` provides the utility to quickly generate your escaped html strings. It can be done as follows
Write the usual html snippet and copy paste in ``viewify_input.txt`` and run
```bash
sails-viewify escape
```
The escaped string can be copied and pasted from ``viewify_output.txt``.
## Command List
- sails-viewify
- sails-viewify init
- sails-viewify escape
## Goals and Plans
The main scope of viewify is to speed up the frontend development by reusing the models defined for the backend. However , it doesn't stop with that.
Future release plan includes ,
- standardizing the ``sails-viewify.js`` configuration file.
- User Interface for generating the configuration file and doing almost everything.
- Migrating towards GUI based environment for basic sails frontend development.
- Video Demo for using sails-viewify.
- Current version of ``sails-viewify`` includes the command line tool only . Efforts will be taken to build API for using it programmatically.
- currently handles types . Support for models and collections.
- specifying the type of element to be used in model itself.
## Contribution
Contributions in any form are welcomed. Some of the areas that currently need help are documentation and writing tests.You are also welcomed to join this project for standardizing the already existing stuff and for implementing the plans mentioned above.
## License
``sails-viewify`` is licensed under [The MIT License](./LICENSE)