Skip to content

Client side introduction

Luis Eduardo Brito edited this page Oct 1, 2013 · 10 revisions

The client of the framework project is divided in the backend MVC Pattern and the Client Framework.

Rendering views from backend server

Views are rendered using the ejs module, but are wrapped in the Response Adapter calling the method response(res).view(), where res is the response object passed to the controller by the Router.

Sample Home Controller /api/controllers/home.js

module.exports = {

    index: function(req, res) {

      response(res).view("home/index", {
        title: "node-web-cluster",
        message: "welcome!"
      });

    },
}

Sample Home View

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title><%- title %></title>
	</head>
	<body>
		<%- message %>
	</body>
</html>

Result:

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>node-web-cluster</title>
	</head>
	<body>
		welcome!
	</body>
</html>

The full documentation for backend views can be found in the Views wiki page.

Working with controllers with the client side framework

The framework manage controllers in the client-side too, so you can create dynamic apps powerd by Ajax or Websockets to prevent page-reloading.

Create controllers in the app.js file:

var controllers = {
  home: function(client) {
    // define view data
    var data = {
      title: "note-web-cluster",
      version: "v0.0.2"
  };

  // render template for home
  client.render("home", data);
},

Define a HTML template for them:

<div data-endpoint="controller"></div>

<script data-controller="home" type="text/template">
  App: <%= title %> (<%= version %>)
</script>

It will result in this:

<div data-endpoint="controller">App: node-web-cluster (v0.0.2)</div>

The Publisher/Subscriber pattern in HTML

The Sandbox and the Client classes wraps a HTML publish/subscribe environment. So, you could hide content from a non-authenticated user form HTML tags.

There are several ways to do it

Subscribing to events

data-subscribe Broadcast event which will trigger the event publication.

data-action Defines the broadcast function callback to the event.

Publishing data

data-on Javascript event which will trigger the event publication.

data-event Defines the broadcast event that you're posting information.

data-pub JSON broadcast data, which will be parsed into a Javascript Object.

Example

<div id="user-info" data-subscribe="user/logout" data-action="$(this).remove()">
    Your Name: <%- user.name %>
</div>

<input type="button" value="Logout" data-on="click" data-event="user/logout" data-pub="{}">

The full documentation for the client-side framework can be found in the Client wiki page.

Clone this wiki locally