em-helpers
v0.8.0
Published
As set of handlebar helpers for Ember.
Downloads
2,541
Maintainers
Readme
Em-helpers
As set of handlebar helpers for Ember 1.13.11 and higher. Uses bootstrap for styling.
Installation
npm install --save em-helpers
Running UTs & integration tests
ember test
Running demo app
ember server
- Visit your app at http://localhost:4200.
Helpers
1. txt - for formatting text
{{txt <value> [type={string} ..extra properties depended on type.. formatter={Function} ]}}
- When value is
undefined
ornull
, txt displays a 'Not Available' message - If the formatter function (built-in/external) throws an error; the error will be logged and an 'Error!' message will be displayed
type:
- Supported values =
date, duration, number or memory
- txt uses momentjs for formatting date & duration, and numeraljs for formatting numbers
- Other parameters depend on the type
type='date'
- momentjs is used for formatting
- With date, value can be a date object, date string or number of milliseconds
- internal date formatter will perform all the parsing, and conversions
- Supported extra properties
- format - Displayed date format. Default value is
DD MMM YYYY HH:mm
- timeZone - Displayed date time zone. Default is local time zone.
- valueFormat - Format of incoming date string
- valueTimeZone - Time zone of incoming value. Default value is
UTC
- format - Displayed date format. Default value is
type='duration'
- momentjs is used for formatting
- Expects value to be of number type
- End result will be of the format
Y years M months D days h hours m minutes s seconds
- Supported extra properties
- valueUnit - Can be used to specify the unit of incoming value. It can be either of the string mentioned here
type='number'
- numeraljs is used for formatting
- Supported extra properties
- format - Can be any of the format strings mentioned here. Default value is
0,0
.
- format - Can be any of the format strings mentioned here. Default value is
type='memory'
- A short had for
type='number'
&format='0 b'
type='json'
- Pretty prints an object in an indented JSON representation. Uses JSON.stringify internally.
- Supported extra properties
- replacer - Same as JSON.stringify replacer
- space - Same as JSON.stringify space. Defaults to 4 spaces
formatter:
- An optional callback function to create custom formatting.
- Will be called with two values;
value
and propertyhash
passed into the helper - Returned value must support
toString
method.
Examples
{{txt}} // Not Available!
{{txt "Bat Man"}} // Bat Man
{{txt 1399919400000 type="date"}} // 13 May 2014 00:00
{{txt 3333 type="duration"}} // 3 seconds
{{txt 10000000000 type="number"}} // 10,000,000,000
{{txt 10000000000 type="memory"}} // 9 GB
{{txt obj type="json"}}
// With obj={x: 1, y:2}
// Value displayed is
// {
// "x": 1,
// "y": 2
// }
2. em-progress - A simple progress bar
{{em-progress value=0 striped=true}}
value
- Current value to be displayed
valueMin
- Defaults to 0
- Progress would be calculated from this value
valueMax
- Defaults to 1
- Progress would be calculated to this value
striped
- Adds candy stripes to the progress-bar
- Also the bar is animates when valueMin < value < valueMax
style
- Use this param to color the progress bar
- All styles provided by bootstrap are supported
- Available values are success, info, warning & danger
2. em-breadcrumbs
{{em-progress items=[array of item objects]}}
Each item object can have the following properties.
text
- The link display text
routeName
- When specified the item will be a link-to the respective route
model
- If you want to route to a specific model/id as dynamic segment
- To have multiple dynamic segments pass an object of values, and use a serialize hook
href
- This creates an anchor tag instead of ember's link-to
- Useful for linking to external resources
classNames
- Must be an array of css class names