• Stars
    star
    1,276
  • Rank 36,897 (Top 0.8 %)
  • Language
    JavaScript
  • Created almost 11 years ago
  • Updated over 10 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

A tiny foundation for building reactive views

ripple.js

Build Status

A tiny foundation for building reactive views with plugins. It aims to have a similar API to Reactive, but allow composition of views, like React. The major difference for other view libraries is that there are no globals used at all. Each view has its own set of bindings and plugins. This makes composition of views really easy.

var Person = ripple('<div>{{name}}</div>')
  .attr('name', { required: true, type: 'string' });

var person = new Person({
  name: 'Tom'
});

person.appendTo(document.body);
person.name = "Barry"; // DOM updates automatically

Install

component install ripplejs/ripple

Browser Support

Supports real browsers and IE9+.

Documentation

Documentation is on the wiki.

Examples

See more examples at ripplejs/examples

Plugins

  • shortcuts - add custom key binding combos
  • events - add event listeners to the DOM and call methods on the view
  • each - Basic iteration using the each directive.
  • bind-methods - Bind all methods on the prototype to the view
  • markdown - Adds a directive to render markdown using Marked.
  • extend - Makes adding methods to the view prototype a little cleaner
  • intervals - Easily add and remove intervals
  • computed - Add computed properties.
  • refs - Easily reference elements within the template
  • dispatch - Dispatch custom DOM events up the tree

View and add them on the wiki

License

MIT

More Repositories

1

view

A base view that handles state and properties
JavaScript
11
star
2

interpolate

Interpolate a string using expressions, data and filters.
JavaScript
10
star
3

keypath

Get or set a property on an object using a keypath
JavaScript
7
star
4

expression

Execute expressions in a context
JavaScript
7
star
5

model

Watch an object and all of it's properties for changes
JavaScript
6
star
6

bind-methods

Plugin for view to automatically bind all functions to the view.
JavaScript
4
star
7

list

For creating lists of views
JavaScript
4
star
8

array-observer

Watch an array for changes
JavaScript
4
star
9

each

Allows iteration in templates
JavaScript
4
star
10

state

Batch all changes to an object until the next frame
JavaScript
3
star
11

examples

Examples using ripple.js
JavaScript
3
star
12

lifecycle

Simple methods for binding to lifecycle events
JavaScript
2
star
13

shortcuts

Create custom keyboard combos
JavaScript
2
star
14

compiler

Compile a view using interpolation, attribute bindings and custom elements
JavaScript
2
star
15

waves

ripple for people without package managers
JavaScript
2
star
16

refs

Easily access elements within the view using ref attributes
JavaScript
1
star
17

view-compiler

Plugin for view to add template rendering, mount and unmounting.
JavaScript
1
star
18

dispatch

Plugin for ripple to emit custom DOM events
JavaScript
1
star
19

accessors

Plugin for ripplejs/model for nice getters and setters
JavaScript
1
star
20

ripplejs.github.io

Documentation
CSS
1
star
21

map-attributes

Map a nodes attributes
JavaScript
1
star
22

events

Listen for events like click, touch, etc in a template using attributes.
JavaScript
1
star