https://github.com/jonabrams/pieceful

A very simple library for connecting your HTML with your JavaScript.
https://github.com/jonabrams/pieceful

Last synced: about 2 months ago
JSON representation

A very simple library for connecting your HTML with your JavaScript.

• Host: GitHub
• URL: https://github.com/jonabrams/pieceful
• Owner: JonAbrams
• License: isc
• Created: 2016-03-14T00:23:34.000Z (almost 9 years ago)
• Default Branch: master
• Last Pushed: 2016-03-27T21:24:21.000Z (almost 9 years ago)
• Last Synced: 2024-10-03T13:36:57.649Z (4 months ago)
• Language: JavaScript
• Size: 11.7 KB
• Stars: 6
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# PiecefulJS

[![Build Status](https://travis-ci.org/JonAbrams/pieceful.svg?branch=master)](https://travis-ci.org/JonAbrams/pieceful)

A very simple library for connecting your HTML with your JavaScript.

When Backbone, Angular, and React are overkill, add a tad of structure to your code using components, made up of pieces.

Features:

- Modularize your JS into components.

- Add structure by breaking components into "pieces".

- Easily declare event listeners.

- Makes use of jQuery if available, but it's not required.

- No external dependencies.

- Compatible with IE9+ and all other modern browsers.

## Usage Example

```html

  Do you agree to the terms and conditions?

  

  Sign Up

  component('terms', {

    pieces: ['termCheckbox', 'termSubmit'],

    events: {

      termCheckbox: {

        click: 'toggleSubmit'

      }

    },

    init: function () {

      this.termSubmit.disabled = true;

      /* or with jQuery available: */

      this.$termSubmit.attr('disabled', true);

    },

    toggleSubmit: function (event) {

      this.termSubmit.disabled = !event.target.checked;

    }

  });

```

## Installation

`npm install pieceful`

Then load `peaceful.js` onto your web site however you like. It provides a single global function: `component`.

## Credits

Created by [Jon Abrams](https://twitter.com/JonathanAbrams)