Nucleus is deprecated. It's a fantastic tool but it's got a new name and a new repository, it's now called Seam and you can find it here Event better, it's wrapper into something more fancy, called Seam-View, which allows you to define your templates as strings or DOM elements before adding JS behavior to it.

Nucleus binds your JS logic to the DOM by adding configuration to the markup

Ever wanted to bind your JS logic to the DOM by doing something like this in your HTML?

	<p data-bind="value: name"></p>
	<button data-listen="click: doSomething"></button>

Nucleus allows you to do just that. It will create the link between your HTML and your JavaScript logic.

Let's start with a simple example. We would like to set the value of "name" in the paragraph.

HTML

	<p data-bind="value: name"></p>

JavaScript

	// The object to display in the DOM
	var someone = {
		// This is the value that we want to display in the paragraph
		name: "John",
		type: "Doe"
	};
	// We start by initializing Nucleus
	var nucleus = new Nucleus();
	// Then we add a nucleus plugin called 'bind'
	nucleus.add("bind", {
		// Which has a method called value
		value: function (node, param) {
			// That will set the innerText of the dom to "John"
			node.innerText = someone[param];
		}
	});
	// Then we tell it where to find the DOM elements to bind
	nucleus.apply(document.querySelector("p"));

Nucleus will actually create this relationship:

Where data-bind is configured while adding the plugin to nucleus. We could have used any other allowed name, such as 'listen', 'style', 'css', 'text' or even 'another-plugin_for-nucleus'.

Nucleus will then execute the method 'value' in the plugin 'bind', passing it two things:

• {HTMLElement} the node to which the data-attribute is applied
• {String} the parameters specified in the data-attribute, after the name of the method (name in our case)

We've just bound some JS logic to a dom element. This seems overkill for such simple task, but it'll make more sense when we'll add more plugins, and especially when they are plugins that we can just reuse.

Let's add more plugins, one for setting data into the DOM, one for listening to DOM events.

HTML

	<section>
		<p data-bind="value: name"></p>
		<button data-listen="click: doSomething"></button>
	</section>

In this case, we have two plugins, one called 'bind', and the other one called 'listen'. We can configure Nucleus to accept more than one plugin by calling the 'addAll' method instead of just 'add':

	// This is some UI with a doSomething method:
	var ui = {
		doSomething: function () {
			// do something
		}
	}
	nucleus.addAll({
		// This is the plugin that we have seen before
		bind: {
			value: function (node, param) {
				node.innerText = someone[param];
			}
		},
		// This is the new plugin called listen
		listen: {
			click: function (node, method) {
				node.addEventListener("click", function (event) {
					ui[method](event);
				}, true);
			}
		}
	});

We still have the same plugin for adding data to the DOM. We also have added a new plugin called 'listen' that adds an eventListener to the targeted DOM. Whenever the user clicks on this DOM element, it will call the method 'doSomething' on UI.

Of course, this example is very limited, as we can't bind a value from an object to something else than innerText, and we can't listen to another event than 'click' as long as we don't create new functions for handling them. Moreover, we can't change the object from which we get the value, nor can we change the object on which to call the method when a click occurs.

So let's create some reusable plugins. We pretend that the object that contains the data is a backbone.Model, which triggers events whenever something changes. We could also call a method on a backbone.View when a click occurs.

HTML