ipoxy's Introduction

ipoxy

Declarative template data binding.

Features:

Immutable data
Incremental DOM

Usage

    ipoxy.bind(target, data)

Syntax

Variables

Can be used inside text:

    <input type="text" value="{{ todo.task }}" />
    Your task: {{ todo.task }}

Repeat

    <ul>
      <template repeat="{{ todos }}">
        <li>{{ task }}</li>
      </template>
    </ul>

If

  <template if="{{ todos.length }}">
    You have {{ todos.length }} todos left.
  </template>

You can also combine if and repeat.

Unless

  <template unless="{{ todos.length }}">
    Well done, you have no todos left!
  </template>

You can also combine unless and repeat.

Inputs

    <input type="checkbox" checked="{{ todo.isDone }}" />

    <select value="{{ isDone }}">
      <option value="true">true</option>
      <option value="false">false</option>
    </select>

    <input type="radio" name="isDone" value="true" checked="{{ isDone }}" /> True
    <input type="radio" name="isDone" value="false" checked="{{ isDone }}" /> False

    <input type="text" value="{{ todo.task }}" />

    <textarea>{{ todo.task }}</textarea>

Filters

{{ expression | filterName }}

`html`

Do not encode html entities.

`class`

  <span class="{{ item.selected | class('active') }}"></span>

Create Custom Filter

// getter only
epoxy.registerFilter('uppercase', function(value) {
  return value.length
})

// getter and setter
epoxy.registerFilter('uppercase', {
  get: function(value) {
    return value
  },
  set: function(value) {
    return value.toUpperCase()
  }
})