-
Notifications
You must be signed in to change notification settings - Fork 0
Client side introduction
The client of the framework project is divided in the backend MVC Pattern and the Client Framework.
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.
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 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.