Monthly Archives: April 2013

Data-driven Knockout views II

Last time I posted a code snippet with description of data driven Knockout views. I have modified and simplified it and

  • added support for forEach binding and
  • the type member of ViewModel class can return a function that is evaluated for every item in collection

This brings even more flexibility, the view model itself can decide which view to use based on a value returned from type function.

], function(ko) {

    ko.bindingHandlers.content = {

        'init': function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
            var options = ko.utils.unwrapObservable(valueAccessor());

            var templateNameFunc = function(value, itemBindingContext)
                if('template' in options)
                    return options['template'];

                    throw new Error("Set 'type' of view model class.");

                var type = value.type;
                if(typeof type == 'function')
                    type = type();

                return type.replace(/viewmodel/ig, 'View');

            if ('foreach' in options) {
                var dataArray = (options['foreach']) || [];
                ko.renderTemplateForEach(templateNameFunc, dataArray, options, element, bindingContext);

            var templateName = templateNameFunc(,
                dataValue = ko.utils.unwrapObservable(options['data']);

            var innerBindingContext = bindingContext['createChildContext'](dataValue, options['as']);
            ko.renderTemplate(templateName || element, innerBindingContext, options, element);
contentBindingHandler.jsview rawview file on Bitbucket

The example will follow soon.