Skip to content
KineticJS plugin for KnockoutJS
JavaScript CoffeeScript
Pull request Compare This branch is 1 commit behind fizmo:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.
example
.gitignore Add knockout as a dependency Mar 25, 2013
README.md Reword the plugin description. Jun 5, 2012
VERSION.md Updated version and rebuild Jun 11, 2012
coffee-script.js Bugfix observables (again) this time with test Jun 8, 2012
component.json 0.1.5 Feb 28, 2014
knockout-kinetic.coffee 0.1.5 Feb 28, 2014
knockout-kinetic.js 0.1.5 Feb 28, 2014
package.json Rebuild. Jan 16, 2013

README.md

knockout-kinetic

A KineticJS plugin for KnockoutJS.

Overview

This package is designed to enable using the data-binding awesomeness of KnockoutJS with the HTML5 Canvas drawing wizardy of KineticJS. Fun features include:

  • Declartive Canvas elements: create a hierarchy of Kinetic nodes inline in your HTML, with no JavaScript!
  • Kinetic Node data-binding: declartively bind properties of your Kinetic nodes to your ViewModel, without manually subscribing to observables!

Usage

While you can use regular HTML elements as placeholders for your Canvas, it is recommended that you use virtual elements instead:

<!DOCTYPE html>
<html>
  <head>
    <title>A Knockout/Kinetic example</title>
    <script type="text/javascript" src="kinetic-v3.9.8.min.js"></script>
    <script type="text/javascript" src="knockout-2.1.0.js"></script>
    <script type="text/javascript" src="../knockout-kinetic.js"></script>
  </head>
  <body>
    <!-- 
    This example is from the 'Rect' tutorial:
    http://www.html5canvastutorials.com/kineticjs/html5-canvas-kineticjs-rect-tutorial/
    -->
    <div id="container">
      <!-- Look, ma! No JavaScript! -->
      <!-- ko Kinetic.Stage: { width: 578, height: 200 } -->
      <!--     ko Kinetic.Layer: { } -->
      <!--         ko Kinetic.Rect: { x: 239, y: 75, width: 100, height: 50, fill: "#00D2FF", stroke: "black", strokeWidth: 4 } -->
      <!--         /ko -->
      <!--     /ko -->
      <!-- /ko -->
    </div>
    <script type="text/javascript">
        // Ok, a *little* JavaScript...
        ko.applyBindings();
    </script>
</html>

This example doesn't use any actual observables, but they are fully supported.

Feedback

The best way to provide feedback is via the github issues page, as I don't actively monitor either the Kinetic or Knockout forums. Pull requests are a great way to get my attention. :)

Something went wrong with that request. Please try again.