ractive-toolkit

Supplies a few helpers for Ractive

Example

index.js

var Ractive = require('ractive-toolkit')

... create new Ractive ...

Event handlers

Context menu

To fire a contextmenu event on a node:

<div on-contextmenu="actions:{{i}}">
</div>

self.on('actions', function (event, i) {
  // contextmenu fired
})

Template Helpers

Humanizing dates and bytes

<h1> {{relativeDate(last_updated)}} </h1>
<p>  {{prettyBytes(size)}} </p>

Filtering

If the items are strings, simply pass the object in question to filter and the searchTerm to filter.

<input name="search" type="text" value="{{searchTerm}}"/>
{{#items}}
   {{#if filter(this, searchTerm) }}
     <div>{{this}}</div>
   {{/if}}
{{/items}}

If the items are objects, you need to provide the subkeys to filter by:

<input name="search" type="text" value="{{searchTerm}}"/>
{{#items}}
  {{#if filter(this, searchTerm, ['name', 'description']) }}
    <div>{{this.name}}</div>
  {{/if}}
{{/items}}

Modules

• pretty-bytes
• relative-date