paperclip-component

paperclip-view ==============

npm install paperclip-component
53 downloads in the last day
136 downloads in the last week
480 downloads in the last month

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

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>
npm loves you