{"id":15445456,"url":"https://github.com/scriptnull/sails-viewify","last_synced_at":"2025-04-19T20:41:39.036Z","repository":{"id":25954578,"uuid":"29396277","full_name":"scriptnull/sails-viewify","owner":"scriptnull","description":"Convert your sails models into views.","archived":false,"fork":false,"pushed_at":"2016-03-01T16:19:20.000Z","size":17,"stargazers_count":10,"open_issues_count":1,"forks_count":5,"subscribers_count":4,"default_branch":"master","last_synced_at":"2024-04-14T11:05:23.670Z","etag":null,"topics":["html","sails","sails-model","sailsjs"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/scriptnull.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-01-17T16:02:46.000Z","updated_at":"2018-10-11T04:44:40.000Z","dependencies_parsed_at":"2022-08-06T07:16:12.582Z","dependency_job_id":null,"html_url":"https://github.com/scriptnull/sails-viewify","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/scriptnull%2Fsails-viewify","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/scriptnull%2Fsails-viewify/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/scriptnull%2Fsails-viewify/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/scriptnull%2Fsails-viewify/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/scriptnull","download_url":"https://codeload.github.com/scriptnull/sails-viewify/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249795203,"owners_count":21326777,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["html","sails","sails-model","sailsjs"],"created_at":"2024-10-01T19:44:58.839Z","updated_at":"2025-04-19T20:41:39.012Z","avatar_url":"https://github.com/scriptnull.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# sails-viewify\n\n[![npm](https://img.shields.io/npm/v/sails-viewify.svg?style=flat-square)](https://www.npmjs.com/package/sails-viewify)\n[![npm](https://img.shields.io/npm/dm/sails-viewify.svg?style=flat-square)](https://www.npmjs.com/package/sails-viewify)\n[![npm](https://img.shields.io/npm/l/sails-viewify.svg?style=flat-square)](https://github.com/scriptnull/sails-viewify/blob/master/License.md)\n[![Gitter chat](https://badges.gitter.im/scriptnull/sails-viewify.png)](https://gitter.im/scriptnull/sails-viewify)\n\n``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.\n\n\u003e 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).\n\n## Install\n\nInstall sails-viewify from npm.\n\n```bash\nnpm install -g sails-viewify\n```\n\n## Example\n\nLet us consider that you have a model called User.\n\n```javascript \nmodule.exports = {\n\n  attributes: {\n    fname : {\n      type : 'string'\n    },\n\n    lname : {\n      type : 'string'\n    },\n\n    salary : {\n      type : 'integer'\n    } \n  }\n\n};\n```\n\nYour obvious need might be creating a view that collects/exhibits the data for the model. In this case , your view may look like\n\n```html \n\u003cform method=\"POST\" action=\"/user/add\"\u003e \n    \u003c!-- First Name --\u003e\n    \u003clabel for=\"fname\" \u003e First Name \u003c/label\u003e\n    \u003cinput type=\"text\" name=\"fname\" id=\"fname\" /\u003e\n    \u003c!-- Last Name --\u003e\n    \u003clabel for=\"lname\" \u003e Last Name \u003c/label\u003e\n    \u003cinput type=\"text\" name=\"lname\" id=\"lname\" /\u003e\n    \u003c!-- Salary --\u003e\n    \u003clabel for=\"salary\" \u003e Salary \u003c/label\u003e\n    \u003cinput type=\"number\" name=\"salary\" id=\"salary\" /\u003e\n\u003c/form\u003e\n```\n\nIn this case , you only have 3 fields , but think of a situation \n\n- where your model has about some 30 attributes. \n- where you use some more tags and CSS classes to follow a uniform design throughout your project\n\nYou 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.\n\nWhat 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 !\n\nYou 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.\n\n## How To Use \n\nCreate and navigate to your sails project. Go ahead and create your models and controllers.\n\n```bash\nsails new myproject \ncd myproject\nsails generate model User\nsails generate controller User \n```\n\nInstall sails-viewify globally.\n\n```bash\nnpm install -g sails-viewify\n```\n\nInitialize sails-viewify in the sails project by executing the following command.\n\n```bash\nsails-viewify init\n```\n\nThis creates two files namely , \n\n- ``config/sails-viewify.js`` - Has the configuration details.\n- ``viewify_input.txt`` - Refer ```sails-viewify escape```(extended use) for usage.\n\nNext step is configuring your ``sails-viewify.js`` config file.\n\n```javascript\nmodule.exports = {\n\n  template: [\n    {\n      type: 'text' ,\n      htmltext: '\u003cp\u003etype of {{name}} is {{type}}\u003c/p\u003e\\n',\n      specials: [\n        {\n          text: '{{name}}' ,\n          replacer: 'name'\n        },\n        {\n          text: '{{type}}' ,\n          replacer: 'type'\n        }\n      ]\n    }\n  ]\n\n};\n```\n\n- ``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).\n    - ``type`` - [string] specifies the type of the attributes used in the model.\n    - ``htmltext`` - [string] specifies the html text to be generated for the respective attribute type.\n    - ``specials`` - [array] specifies the special text in the ``htmltext`` field to be replaced by the respective replacer object value\n        - ``text`` - [string] special text that is to be replaced by the values from the model.\n        -  ``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.\n\nThat's it ! You are ready to generate your view . go ahead and execute \n\n```bash\nsails-viewify modelname viewname\nsails-viewify User UserDetails.ejs\n```\n\nNow, the view named UserDetails.ejs can be found in your views folder.\n\n```html\n\u003cp\u003etype of fname is string\u003c/p\u003e\n\u003cp\u003etype of lname is string\u003c/p\u003e\n\u003cp\u003etype of salary is integer\u003c/p\u003e\n```\n\n##### Extended Use\n\nLets say , you want to add an id field to each p tag.Then your htmltext in ``config/sails-viewify.js`` would look like\n\n```javascript\nhtmltext : \"\u003cp id=\"{{name}}\"\u003etype of {{name}} is {{type}}\u003c/p\u003e\" //invalid \n```\n\nThe above seen snippet is invalid since the double quotation marks inside the html are not escaped.So the valid syntax would be \n\n```javascript\nhtmltext : \"\u003cp id=\\\"{{name}}\\\"\u003etype of {{name}} is {{type}}\u003c/p\u003e\" //valid \n```\n\n``sails-viewify`` provides the utility to quickly generate your escaped html strings. It can be done as follows\n\nWrite the usual html snippet and copy paste in ``viewify_input.txt`` and run \n\n```bash\nsails-viewify escape\n```\n\nThe escaped string can be copied and pasted from ``viewify_output.txt``.\n\n## Command List \n\n- sails-viewify \n- sails-viewify init\n- sails-viewify escape\n\n## Goals and Plans \n\nThe 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.\n\nFuture release plan includes ,\n\n- standardizing the ``sails-viewify.js`` configuration file.\n- User Interface for generating the configuration file and doing almost everything.\n- Migrating towards GUI based environment for basic sails frontend development.\n- Video Demo for using sails-viewify.\n- Current version of ``sails-viewify`` includes the command line tool only . Efforts will be taken to build API for using it programmatically.\n- currently handles types . Support for models and collections.\n- specifying the type of element to be used in model itself.\n\n## Contribution\n\nContributions 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.\n\n## License\n\n``sails-viewify`` is licensed under [The MIT License](./LICENSE)","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fscriptnull%2Fsails-viewify","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fscriptnull%2Fsails-viewify","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fscriptnull%2Fsails-viewify/lists"}