sails-viewify
sails-viewify
is a tool for reusing your sails models to build your sails 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 project.If you don't know what it is , first go ahead and see sails.
Install
Install sails-viewify from npm.
npm install -g sails-viewify
Example
Let us consider that you have a model called User.
moduleexports = 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
<!-- First Name --> First Name <!-- Last Name --> Last Name <!-- Salary --> 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 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.
sails new myproject cd myprojectsails generate model Usersails generate controller User
Install sails-viewify globally.
npm install -g sails-viewify
Initialize sails-viewify in the sails project by executing the following command.
sails-viewify init
This creates two files namely ,
config/sails-viewify.js
- Has the configuration details.viewify_input.txt
- Refersails-viewify escape
(extended use) for usage.
Next step is configuring your sails-viewify.js
config file.
moduleexports = template: type: 'text' htmltext: '<p>type of {{name}} is {{type}}</p>\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.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 thehtmltext
field to be replaced by the respective replacer object valuetext
- [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
sails-viewify modelname viewnamesails-viewify User UserDetails.ejs
Now, the view named UserDetails.ejs can be found in your views folder.
type of fname is stringtype of lname is stringtype 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
htmltext : "<p id="name">type of {{name}} is {{type}}</p>" //invalid
The above seen snippet is invalid since the double quotation marks inside the html are not escaped.So the valid syntax would be
htmltext : "<p id=\"{{name}}\">type of {{name}} is {{type}}</p>" //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
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