Cherry.JS

Cherry.JS is a new, incredibly lightweight, binding library (phew!) After including the script, you can easily keep your frontend DOM and your javascript in sync. Find out more

An example

          
//Javascript
var app = new Cherry()
var controller = app.controller('myApp', function($scope) {
  $scope.greeting = 'Hello world!'
})

//Template
<div data-cherry="myApp">
  {{greeting}}
</div>

Hello World!

Models / Two Way Binding

          
//Javascript
var app = new Cherry()
var controller = app.controller('myApp', function($scope) {
  $scope.place = 'world'
})

//Template
//-- Template
<span>Hello {{place}}</span>
<input data-model="place">

Hello {{place}}!

Show / Click Actions

          
//Javascript
var app = app.controller('app', function($scope) {
  $scope.show_message = false;
  $scope.toggleMessage = function() {
      $scope.show_message = true
  }
})

//Template
<button data-click="toggleMessage" class="btn btn-success">Show message</button>

<h2 data-show="show_message">
  Hello there!
</h2>

Hello there!

Todo list (repeat tags)

          
//Javascript
var app = app.controller('app', function($scope) {
  $scope.todos = ['Check out Cherry.JS', 'Make awesome stuff']

  $scope.add_todo = function() {
    $scope.todos.push($scope.new_todo)

    $scope.new_todo = ''
  }
})

//Template
<ul>
  <li data-repeat="todo in todos">{{todo}}</li>
</ul>

<fieldset>
    <input type="text" data-model="new_todo" class="form-control">
    <button data-click="add_todo" id="addTodo">Add Todo</button>
</fieldset>

Todos

{{todo}}