Socket
Socket
Sign inDemoInstall

mnla

Package Overview
Dependencies
Maintainers
1
Versions
4
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

mnla

MNLA is a wrapper for the [Manila](https://github.com/mgrahamjo/manila) template engine. It allows you to bind your server-side Manila templates to client side components, re-rendering the templates when the underlying data model changes.


Version published
Weekly downloads
4
decreased by-20%
Maintainers
1
Weekly downloads
 
Created
Source

MNLA

MNLA is a wrapper for the Manila template engine. It allows you to bind your server-side Manila templates to client side components, re-rendering the templates when the underlying data model changes.

Installation

npm install mnla --save

This documentation assumes you are using Express.

Example Setup

Server side:

// index.js
const express = require('express'),
    app = express(),
    mnla = require('mnla')();

app
    // Define the location of your static assets:
    .use(express.static('assets'))
    .use('/assets', express.static('assets'))
    // If you aren't using a bundler like Browserify,
    // make a static route for the MNLA source code:
    .use('/node_modules/mnla', express.static('node_modules/mnla'))
    // Tell Express to use the MNLA template engine:
    .engine('mnla', mnla)
    .set('view engine', 'mnla')
    .set('views', './views')
    // Set up some routes:
    .get('/', require('./controllers/index'))
    .get('/message', require('./controllers/message')); // JSON endpoint

app.listen(1337, () => {
    console.log('Listening on localhost:1337');
});
// controllers/index.js
const 
    manila = require('mnla/server'),
    // message is the controller for a JSON endpoint
    message = require('./message');

module.exports = (req, res) => {
    manila({
        // Here we define our component names and underlying data sources:
        message: message,
        input: message
    },
    // Don't forget to pass req and res to component controllers:
    req, res)
    .then(templateData => {
        res.render('index', templateData);
    });
};
// controllers/message.js
// component controllers
module.exports = (req, res) => {
    res.json({
        message: "hello, world!"
    });
};
<!-- views/message.mnla -->
<h1><:message:></h1>
<!-- views/input.mnla -->
<!-- 'on' is a special method that you can use to listen to DOM events. -->
<!-- 'updateMessage' is a custom handler that we'll define in a client side script. -->
<input type="text" <:on('input', updateMessage):> value="<:message:>" />
<!-- views/index.mnla -->
<!DOCTYPE html>
<html>
<head>
    <title>MNLA</title>
</head>
<body>
    <!-- since we've set up the 'message' and 'input' components, we can render them thusly: -->
    <::component.message::>
    <::component.input::>

    <!-- to allow client-side data binding, include this at the end of the body: -->
    <::clientData::>
    <!-- and don't forget your client side scripts: -->
    <script src="/node_modules/mnla/dist.js"></script>
    <script src="/assets/js/app.js"></script>
</body>
</html>

Client side:

// assets/js/app.js
manila
.component('message', vm => {
    // Add methods and properties to vm (view model) here.
    // Return an object with methods that can be called by other components
    return {
        update: message => {
            vm.message = message;
        }
    };
})
.component('input', vm => {
    // Here we define the updateMessage method we used in the template.
    vm.updateMessage = event => {
        // Inform the message component of the new value
        // using the 'update' method we created
        manila.components.message.update(event.target.value);
    };
});

FAQs

Package last updated on 07 Jun 2016

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc