Use the todolist application to learn Geddy

Source: Internet
Author: User
Geddy learning notes initial tool install node. JS, Geddy, Jake

The running environment in this article is windows, and the installation of node. JS is relatively simple. You can directly download the installation package from the node. js official website and install it with a dummies.

Install geddy, open cmd.exe, and enter$ npm install -g geddy

Install Jake, enter$ npm install -g geddy jake

Geddy Gen command

Example:

$ geddy gen scaffold book title:string descrption:text  $ geddy gen scaffold user name:default

The Geddy generator Commands include:

  • App

  • Secret

  • Scaffold [model properties]

  • Resource [model attributes]

  • Controller

  • Model [model attributes]

    The three commands 'scaffold', 'resource', and 'model' include model attributes separated by spaces.

Build an app

Create a working directory and enter the directory path,

Run the following command:$ geddy gen app to_do

Generate folders and files. For more information, see http://geddyjs.org/tutorial#building_an_app

Now open your simple elementary Geddy application:

$ cd to_do  $ geddy

Then open the browser and enter the hello World page.

Create "resource"

Now we create "Resources" for the todo project. The todo project includes the title and status

$ geddy gen scaffold to_do title:default status

After creation, restart CMD and restart Geddy:

$ geddy

Then open the browser (the URL address is followed by multiple app names), and then we can see the app page of todolist.

Add verification function

Open 'app/model/to_do.js 'in the project and add the following code to verify the title and status:

var ToDo = function(){    ...    this.validatesPresent(‘title‘),    this.validatesLength("title", {min: 5});    this.validatesWithFunction(‘status‘, function(status){      return ‘open‘ === status || ‘done‘ === status;    }, {message: "Status must be ‘open‘ or ‘done‘."});    ...  };  ToDo = geddy.model.register("ToDo", ToDo);

The code is very simple. Let's test the todolist app and add and edit the todo project.

Create Association

Now we create another "resource" to associate it with our todos.

Assume that the todo project has several steps to complete the creation. Now we will take the scaffold out step "resource ":

$ geddy gen scaffold step title:default description:text status
Add step verification

Now we can associate the steps with the todo project. Next, we must add a 'title' verification for each step-Add the following code to your step model (APP/models/step. JS ):

VaR step = function (){... this. validatespresent ('title'), // same as the todo verification this. validateslength ("title", {min: 5}); this. validateswithfunction ('status', function (Status) {return 'open' = status | 'done' = status ;}, {message: "status must be 'open' or 'done '. "});...}; step = Geddy. model. register ("Step", step );
Create Association

Now we create an association for the created todo and step models.

Add the following code to the todo model:

var ToDo = function () {  ...    this.hasMany(‘Steps‘);  ...  };  ToDo = geddy.model.register(‘ToDo‘, ToDo);

This indicates that a todo can have multiple associated steps (1 to n ).

Next, add the following code to the step model:

var Step = function () {  ...    this.belongsTo(‘ToDo‘);  ...  };  Step = geddy.model.register(‘Step‘, Step);

This indicates that each step is owned by a todo. (1 to 1)

Show Association

Open the empty list of steps.

Then, although we can add step, there is no option to select the associated todo project for us.

Next let's fix this problem. The idea is to get the data in Todos and load it to a drop-down box on the page for selection.

Get todos

Open 'app/controllers/steps. js' in the editor and see the 'add' action (this.add, Step Controller ).

Next, we use Geddy Orm'sallMethod to obtain the previously added Todos project. This is completed before rendering the step editing page:

this.add = function (req, resp, params) {    var self = this;    geddy.model.ToDo.all(function(err, data){      if(err) throw err;      self.respond({params: params, toDos: data});    });  };

The preceding figure shows the data of the todo project and servestoDosThe parameter is uploaded to the 'editor' page of step.

Pass data to form

Openapp/views/steps/add.html.ejs. This is a form shared by the 'add' and 'edit' edit pages. It is rendered as a 'partial '.

Now we need to pass the data of todos to 'partial '. In the line of 'partial', change the code of this line to the following:

<%- partial(‘form‘, {step:{}, toDos: toDos}) %>
Show todos in the drop-down box

Now we open the 'partial 'template 'app/views/steps/form.html. ejs', and we are going to throw the Todos data into a drop-down box.

Geddy has many convenient Assistant tools, suchselectTag, And many others. You can refer to the assistant tool documentation.

In Div. control-group, add a drop-down box as follows:

<label for="title" class="control-label">To-Do for this step</label>  <div class="controls">    <%- selectTag(toDos, step.toDoId, {      name: ‘toDoId‘    , valueField: ‘id‘    , textField: ‘title‘    }); %>  </div>

Second Parameterstep.toDoIdSpecifies which element will be selected by default. This does not work yet, but it works when we start to edit steps.

Save step

Create a new step to check whether it has a todoid (corresponding to the ID of the relevant todo Project). If yes, the Association is correct. If yes, no.

Edit step

Like adjusting 'add' to execute the action, you must adjust 'edit' to execute the action here. Open step controller and change 'edit' as follows:

this.edit = function (req, resp, params) {    var self = this;    geddy.model.Step.first(params.id, function(err, step) {      if (err) {        throw err;      }      if (!step) {        throw new geddy.errors.BadRequestError();      }      else {        geddy.model.ToDo.all(function (err, data) {          if (err) {            throw err;          }          self.respond({step: step, toDos: data});        });        // self.respondWith(step);      }    });  };

Important: OriginalrespondWithThe method is replaced with a low-levelrespond. When you only have one model instance, userespondWithThe method is very convenient, but here we need to transmit some data, so we need to userespondMethod.

Click here to learn more request response methods.

Open 'app/views/steps/edit.html. ejs' and passtoDosTo 'partial ':

<%- partial(‘form‘, {step: step, toDos: toDos}) %>.

Now create more steps and associate them with the same todo project. At this time, we also need to pay attention to another issue: display all the steps in the todo project view.

Association on the todo side

Open Todo's controller 'app/controllers/to_dos.js 'and update 'show' to execute the action to get all steps related to a specific todo item:

this.show = function (req, resp, params) {    var self = this;    geddy.model.ToDo.first(params.id, function(err, toDo) {      if (err) {        throw err;      }      if (!toDo) {        throw new geddy.errors.NotFoundError();      }      else {        toDo.getSteps(function (err, data) {          self.respond({toDo: toDo, steps: data});        });      }    });  };

NotefirstTo obtain the first todo project that matches a specific ID. Note that the todo instance hasgetStepsTo obtain the associated steps data. This is a convenient method provided by Geddy: If todo SetshasManyGeddy will automatically generategetZoobiesTo obtain them.

In additionrespondWithThe method is replacedrespond, The cause and effect of this have been mentioned above.

Now open the 'show 'view (APP/views/to_dos/show.html. ejs) and modify it.

The code at the bottom checks whether the item has been saved by traversing the todo attribute, but this is the default generated code that does not work. we replace it with the following content:

 

The Code traverses the steps associated with the todo item and generates a link to the title of the step and the URL that is linked to the 'show 'of the step to execute the action.

API

Check the following urls:

  • Get:localhost:4000/to_dos.json(Todo project list, which is displayed as a JSON string)
  • Get:localhost:4000/to_dos/:id.json(The ID is: ID of the todo details, including steps, JSON string display)
  • Post:localhost:4000/to_dos(Page display)
  • Put:localhost:4000/to_dos/:id(Page display)
Summary

Now you have completed a todolist Geddy application. If you want to explore more, try:

  • ChangeMain#indexThe route isToDos#index(Prompt: Check out 'config/router. js ')
  • Exploitationgeddy.logAdd some logs
  • Configure 'mongo', 'riak', or 'mongoss' to replace the memory modeladapter. You will find that it is very easy to convert.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.