❤
npm
Sign UpSign In

staplerjs

1.0.1 • Public • Published

staplerjs

Use javascript variables directly in your HTML.

StaplerJS is NOT a templating engine that allows you to reuse HTML snippets and fill it with data. No, instead of taking the data as the source of the application it makes the view leading. Is it usefull? I have no idea! Let me know if you see any benefit.

Installation

Bower

bower install staplerjs

NPM

npm install staplerjs

Basic usage

HTML

<html>
<head>
  <title>Hello $stapler.space</title>
</head>
<body>
  <h1>Hello $stapler.space</h1>
  <input type="text" value="$stapler.space" />
 
  <script src="/staplerjs/dist/stapler.min.js"></script> 
</body>
</html>

JavaScript

var scope = { space: "world" };
 
Stapler(document.documentElement, scope);
 
scope.space = "room";

Documentation

Variables in HTML

A variable in your HTML is recognized by a scope name prefix. The default scope name is $stapler, but you can define your own as well (see Bind scope to HTML).

A variable as text content of an element can be used as follows:

<h1>$stapler.title</h1>
<p>$stapler.post.content</p>
<footer>© tsoffereins $stapler.year</footer>

You can alse use a variable as the value of an attribute:

<a href="$stapler.link">click me</h1>

Input-like elements also support two-way binding; for example:

<input type="text" value="$stapler.title" />

This will print the value of foo in the input field, but will also update foo when t;he user changes the text.

Scope

A scope is the base object you use to feed your HTML. This object can have nested objects and keys with any value except for array.

var scope = { 
  title: "StaplerJS",
  blog: {
    content: "lorem ipsum dolor sit amet"
  },
  year: 2018,
  link: "dev.tsoffereins.com"
};

When a variable points to a function in the scope, this function is executed and the return value used in the view.

var scope = { 
  title: function() {
    return "Stapler" + "JS";
  }
};

Bind scope to HTML

A scope is bound to a piece of HTML using the Stapler function.

Stapler(document.body, scope);

If you want a custom name for your scope (instead of $stapler), you can pass it as the first parameter; make sure it is not too common. The scope name is used in the regular expression to find matches in your html, special characters are escaped.

Stapler('$myScope', document.body, scope);

Changing the scope.

The scope variable is an object and therefor a reference, changing its contents will result in the view being updated with the new value.

scope.title = "Anything";
<h1>$stapler.title</h1> <!-- prints "Anything" -->

StaplerJS uses smart parsing when the scope is bound to the HTML; this means that only the nodes that contain the changed variable will be updated; it won't rerender anything else.

Since the view is in the lead, it does not matter if the data is absent. Whenever the data appears on the scope it will be used by the view again.

scope.blog = null;
<h1>$stapler.blog.content</h1> <!-- prints "" -->
scope.blog = { content: "foo bar" };
<h1>$stapler.blog.content</h1> <!-- prints "foo bar" -->

Support

You can reach me via Twitter: @tsoffereins

Please file issues here at GitHub.

Readme

Keywords

Package Sidebar

Install

npm i staplerjs

Repository

github.com/tsoffereins/date-range

Homepage

github.com/tsoffereins/staplerjs#readme

Weekly Downloads

1

Version

1.0.1

License

MIT

Unpacked Size

26.5 kB

Total Files

7

Last publish

Collaborators

  • tsoffereins
Try on RunKit
Report malware