Knockout with multiple binding providers

modified (currently rather ropey) version of knockout with multiple binding providers each m,aintaining it's own set of binding contexts in the DOM.

by GilesBradshaw

HTML

<script src="http://sigyl.com/playground/scripts/knockout-latest.debug.multi.js"></script>

<h1>Two binding providers are used to bind markup to the model so that meta data can be used to control the display of a list of data.</h1>
<a href='https://github.com/GilesBradshaw/knockout'>https://github.com/GilesBradshaw/knockout</a>

<div id='testnode'>
        <table>
            <thead>
                <tr >
                    <!-- ko-ns foreach: properties -->
                    <td data-bind-ns='text: prop'></td>
                    <!-- /ko-ns -->
                </tr>
            </thead>
            <tbody>
                <!-- ko-nss foreach: someitems -->
                <tr>
                    <!-- ko-ns foreach: properties -->
                    <td data-bind-ns='attr : {"data-bind-nss" : "text: " + prop }'></td>                    
                    <!-- /ko-ns -->
                </tr>
                <!-- /ko-nss -->
            </tbody>
    </table>        
    <table>
            <thead>
                <tr >
                    <!-- ko-ns foreach: properties -->
                    <td data-bind-ns='text: prop'> </td>                    
                    <!-- /ko-ns -->
                </tr>
            </thead>
            <tbody>
                <!-- ko-nss foreach: someitems -->
                <tr>
                    <!-- ko-ns foreach: properties -->
                        <td >
                            <input data-bind-ns='attr : {"data-bind-nss" : "value: " + prop}'/>
                        </td>                    
                    <!-- /ko-ns -->
                </tr>
                <!-- /ko-nss -->
            </tbody>
    </table>    
    <button onClick='window.ShowParty()'>Show Party</button>
    <button onClick='window.PopProperty()'>Pop Property</button>
           <h2>Currently displayed properties</h2>
    <table>
        <tbody>   
            <!-- ko-ns foreach: properties -->
            <tr>
                <td...

CSS

body
{
    font:15px arial,sans-serif;
}

table
{
    margin:20px;
}
thead
{
    font-weight : bold;
}
td
{
    background-color:lightgray;
    padding:10px;
}
h1,h2 { 
  margin-top : 10px;
    font-weight : bold;
    font-size : 20px;
}

JavaScript

//you can now set up as many binding providers as you like
ko.bindingProvider.instance = [new ko.bindingProvider('data-bind-nss', 'ko-nss'), new ko.bindingProvider('data-bind-ns', 'ko-ns')];


var viewModel = {
    someitems: [
        {
        firstName: ko.observable('Barack'),
        lastName: ko.observable('Obama'),
        party: ko.observable('Democrat')

        },
    {
        firstName: ko.observable('George'),
        lastName: ko.observable('Bush'),
        party: ko.observable('Republican')}],


    properties: ko.observableArray([
        {
        prop: 'firstName'},
    {
        prop: 'lastName'}

    ])

};

var ShowParty = function() {
    viewModel.properties.push({
        prop: "party"
    });
}
var PopProperty = function() {
    if (viewModel.properties().length > 0) viewModel.properties.pop(viewModel.properties[viewModel.properties.length - 1]);
}



window.ShowParty = ShowParty;
window.PopProperty = PopProperty;


ko.applyBindings(viewModel, $('#testnode')[0]);