loaf v0.2.6
Loaf.js
Loaf creates virtual "sections" of DOM elements - a sort of document fragment that can be referenced anytime it's attached to the DOM. Loaf is used in:
- mojo.js - javascript framework
- paperclip.js - template engine.
Input:
<html>
<head>
</head>
<body>
<!-- give loaf something to look for -->
<div id="application"></div>
</body>
</html>
Bundle:
var helloSection = loaf(), buttonSection = loaf(), buttonElement;
// add multiple items - this demonstrates how multiple nodes are controlled by one
// section
helloSection.append(document.createTextNode("Hello "));
helloSection.append(document.createTextNode("World!"));
// setup the button which toggles the message visibility
buttonSection.append(buttonElement = $("<div><a href='#'>Toggle Message Visibility</a></div>")[0]);
// create a toggle for the "Hello World!" message.
$(buttonElement).click(function () {
if(helloSection.visible) {
helloSection.hide();
} else {
helloSection.show();
}
});
// convert the sections into controlled document fragments.
$("#application").append(helloSection.toFragment());
$("#application").append(buttonSection.toFragment());
Output:
<html>
<head>
</head>
<body>
<div id="application">
Hello World!
<div>
<a href="#">Toggle Message Visibility</a>
</div>
</div>
</body>
</html>
Here's a live example: http://jsfiddle.net/4L8wy/1/. Be sure to inspect the DOM as you're toggling the message visibility!
API
section loaf(nodeFactory = document)
creates a new block of dom elements
section.replace(node)
inserts as child at the end of the target node.
section.hide()
hides the section - replaces all bundled nodes with a placeholder node
section.show()
displays the section if it's hidden
section.append(children...)
appends a node to the section
section.prepend(children...)
prepends a node to the section
section.replaceChildNodes(children...)
disposes the loaf
section.toFragment()
returns the section as a document fragment
section.dispose()
removes all child nodes
section.getChildNodes()
returns an array of the child nodes
section.start
the start marker for the section
section.end
the stop marker for the section
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago