Compi JS

A little UI component loader using KnockoutJS and jQuery.

Installation

npm install compi --save-dev

Usage

After including compi js just create a new component.

var myFirstComponent = new Compi(string pathToTemplate, function viewModel);

The path to the template is relative to the destination of your final script. ViewModel must be an constructor. For more information about the view model, just take a look at the documentation of Knockout JS. http://knockoutjs.com/index.html

When instanciated, render the template into a HMTL node with an given query selector.

myFirstComponent.render("#page");

Example

index.html

<h1>My Nice Page</h1>
<div id="#page"></div>
<script src="scripts/app.js"></script>

templates/firstPage.html

<div data-bind="text: firstText"></div>

scripts/app.js

function MyViewModel() {
  this.firstText = "Hello World";
}

var firstComponent = new Compi("templates/firstPage.html", MyViewModel);

firstComponent.render("#page");

Events

var firstComponent = new Compi("templates/firstPage.html", MyViewModel);

firstComponent.on("beforeRender", function() {
  console.log("Before rendering ...");
});

firstComponent.on("afterRender", function() {
  console.log("After rendering ...");
});