❤
npm
Sign UpSign In

paperclip-component

0.3.1 • Public • Published

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>

Readme

Keywords

Package Sidebar

Install

npm i paperclip-component

Repository

github.com/classdojo/paperclip-view

Homepage

github.com/classdojo/paperclip-view

Weekly Downloads

15

Version

0.3.1

License

BSD

Last publish

Collaborators

  • architectd
  • crcn
Try on RunKit
Report malware