KO Components

by John Farrar

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<shop:cart mode="'detailed-list'" items="items"></shop:cart>

JavaScript

ko.components.register("shop:cart", {
    viewModel: function (data) {
        this.mode = data.mode;
        this.items = data.items;
    },
    template: "<div data-bind=\"text: mode\"></div><ul data-bind=\"foreach: items\"><li><a data-bind=\"text: name,attr: \{href: 'data/item/'+id\}\"></a></li></ul>"
});

ko.bindingProvider.instance.preprocessNode = function (node) {
    if (ko.components.getComponentNameForNode(node)) {
        var valuesToJoin = [];
        for (var i = 0, atts = node.attributes, n = atts.length, arr = []; i < n; i++) {
            valuesToJoin.push(atts[i].nodeName + ':' + atts[i].value);
        }

        node.setAttribute('params', valuesToJoin.join(','));
    }
}

var vm = {
    items: [{
        id: 1,
        name: 'Test'
    },{
        id: 2,
        name: 'Another'
    },{
        id: 3,
        name: 'Item'
    }]
};

ko.applyBindings(vm);