Download jsBind. There are two downloads available if you just want to use jsBind on your own project then you only need to download the compiled scripts. The full source is also available if you are interested in how jsBind works or if you would like to use the samples offline.

Download compiled

Compiled and minified script ready to use.

Download Compiled

Download source

Full source, samples and documentation.

Download Source

Step 2

Place the downloaded script into your web site. You can put the file anywhere but its a good idea to put it somewhere near the root of the side. For the rest of this guide we will assume the script is in a folder called 'js' under the root.

Step 3

Add a reference to the jsBind script to your page. Add the following code to your page:

<script src="js/jsBind.min.js"></script>

You can add this almost anywhere but its best to add it in the head section or at the end of the page.

Step 4

Now we can declare a binding, create a model, and run jsBind. The following example shows how to bind a simple value and a click event.

Add the following HTML to the body element.

<div id="ClickCount">
    <button class="btn" data-jsBind="prop:innerText='Clicked: ' + $d.clickCount.get(); event:click=$d.incrementCount()"></button>
<div>

Then add the following script element to the page.

<script>
    // Create the model
    var Model = (function () {

        function Model() {
            this.clickCount = new jsBind.ObservableNumber();
        }

        Model.prototype.incrementCount = function () {
            this.clickCount.set(this.clickCount.get() + 1);
        }
        return Model;
    })();

    // Get the root of the UI
    var element = document.getElementById("ClickCount");

    // Bind the UI to the model
    new jsBind.Binder(element, new Model());
</script>

Here is a live example - just click the button.