marionette-paperclip

Declarative data-bindings (PaperclipJS) for MarionetteJS templates. This module will give your views the same flexibility & speed as Angular / React views.

Todo list example: http://plnkr.co/edit/SrQykCS0gN3oQyvTYRha?p=preview

Basic example:

var ButtonView = Backbone.Marionette.ItemView.extend({

  /**
   called when the template button is clicked
   */
   
  onClickButton: function () {
    console.log("button clicked!")
  },
  
  /**
   * the paperclip template
   */
   
  template: paperclip.marionette.template("<button onClick='{{view.onClickButton()}}'>click me!</button>"),
  
  /**
   * registers additional helpers for the template. This is optional.
   */
   
  templateHelpers: paperclip.marionette.templateHelper
});

Here's another example that uses Marionette's event system:

var ButtonView = Backbone.Marionette.ItemView.extend({
  events: {
    'click .button': function () {
      console.log('button clicked!');
    }
  },
  template: paperclip.marionette.template("<button class='button'>click me!</button>"),
});

Features:

• Ability to call functions defined in the view.
• Templates are recycled when a Marionette view is destroyed. Note that you must use the template helper for this.
• Adds a props property that allows you to dynamically update the view without a rull re-render.

API

template paperclip.marionette.template(source)

Creates a template. Note that you can mutate the rendered element however you want.

var template = paperclip.marionette.template("hello {{message}}");
var element = template({ message: "world" });
document.body.appendChild(element);

Function paperclip.marionette.templateHelpers

Adds some additional functionality that gives paperclip templates a boost in performance. Also adds a props property to your view object that allows you to update the template without full re-render. See the todo list example.