0.3.1 • Published 10 years ago
paperclip-component v0.3.1
Paperclip-components allows you to break up your paperclip views into separate files, and re-use them in other parts of your application. This idea was derrived from Ember Components, and Angular Directives.
Requirements
- bindable.js - needed for registering components
- NPM, or Bower - used to install
paperclip-compoennt - paperclip
Installation
- Node:
npm install paperclip-component - Browser:
bower install paperclip-component
Usage
You'll first need to add paperclip-component as a plugin:
var pc = require("paperclip"),
pcc = require("paperclip-component"),
bindable = require("bindable");
//where global components live.
var components = new bindable.Object();
//plugin paperclip-components, and point to the components dictionary
pc.use(pcc(components));After you have that setup, you can start registering components. Here's one specific to a node.js application:
components.set("mainLayout", require("./mainLayout"));mainLayout.js:
var mojo = require("mojojs"),
structr = require("structr"),
pc = require("paperclip")
var MainLayoutView = structr(mojo.View, {
paper: pc.load(__dirname + "/mainLayout.pc")
});
module.exports = MainLayoutView;mainLayout.pc:
<html>
<head>
</head>
<body>
{{ html: sections.body }}
</body>
</html>After you've defined your component, you can use it in any template. Here's how you might use mainLayout in a .pc file:
hello.pc:
{{#mainLayout}}
{{#sections: "body" }}
Hello World!
{{/}}
{{/}}The rendered output of hello.pc would be:
<html>
<head>
</head>
<body>
Hello World!
</body>
</html>