paperclip-component

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

latest

Source

npm

Version: 0.3.1

Version published: 11 years ago

Maintainers: 1

Created: 13 years ago

Source

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>

Keywords

mojo-plugin

paperclip

FAQs

What is paperclip-component?

Is paperclip-component well maintained?

Package last updated on 14 Oct 2014

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install