# ember-cli-bindstyle-helper

> Transformed [https://github.com/yderidde/bindstyle-ember-helper](bindstyle-ember-helper) in an ember-cli addon.

Latest version **0.0.1** (published 2014-11-21) · MIT license · 0 weekly downloads

## Install

```sh
npm install ember-cli-bindstyle-helper
pnpm add ember-cli-bindstyle-helper
yarn add ember-cli-bindstyle-helper
bun add ember-cli-bindstyle-helper
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: no vulnerabilities; high maintenance score.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 0.0.1 |
| Published | 2014-11-21 |
| First published | 2014-11-21 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Node | >= 0.10.0 |
| Dependencies | 1 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 3236 |
| Maintainers | carlos.diogenes |
| Keywords | ember-addon |

## Links

- npm: https://www.npmjs.com/package/ember-cli-bindstyle-helper
- Repository: https://github.com/stefanpenner/ember-cli
- Issues: https://github.com/stefanpenner/ember-cli/issues
- npm.io page: https://npm.io/package/ember-cli-bindstyle-helper

## Dependencies (1)

- [ember-devtools](https://npm.io/package/ember-devtools.md) ^2.0.1

## Recent versions

- 0.0.1 (latest) — 2014-11-21

## README

# ember-cli-bindstyle-helper

Transformed [https://github.com/yderidde/bindstyle-ember-helper](bindstyle-ember-helper) in an ember-cli addon.

A very simple handlebar helper for [ember.js](http://emberjs.com) which allow you to bind style properties in your templates. 

## Installation

* `git clone` this repository
* `npm install`
* `bower install`

## Usage
---
{{bind-style}} is based on ember {{bind-attr}} and works pretty much the same way.


Imagine a view that contains the width of a bar in your bar-chart.

```javascript
App.MyBarChart = Ember.View.extend({
  barWidth: 200
});
```

In your handlebars template you will then do  

```html
<div class="bar" {{bind-style width="barWidth" width-unit="px"}}></div> 
```

You must define the unit for the value to be used. There are 2 ways to define units.  

Global unit   

```html
<div class="bar" {{bind-style unit="px" width="barWidth" height="barHeight"}}></div> 
```   

Specific unit    

```html
<div class="bar" {{bind-style width="barWidth" width-unit="px" height="barHeight" height-unit="%"}}></div> 
```    

If you define a global unit and specific units. The specific unit take precedence over the global when defined.

That's it

## Running

* `ember server`
* Visit your app at http://localhost:4200.

## Running Tests

* `ember test`
* `ember test --server`

## Building

* `ember build`

For more information on using ember-cli, visit [http://www.ember-cli.com/](http://www.ember-cli.com/).

---
_Source: https://npm.io/package/ember-cli-bindstyle-helper · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._