<p>
	 The problem:
</p>
      <p>
	 Some view bindings can get pretty gnarly and you get no syntax support typing away inside an attribute value.
</p>
      <p>
      <a href="http://www.knockmeout.net/2011/08/simplifying-and-cleaning-up-views-in.html" target="_blank">Clean View Bindings</a> gives several great examples.
</p>
      <p>
	Here is another <a href="http://jsfiddle.net/TheDev6/Cmyy9/" target="_blank">simple one</a> that my work <a href="http://ugd.azurewebsites.net/?p=171" target="_blank">buddy</a> originally coded up when showing me custom bindings..
</p>

      <p>The Html</p>
      <script type="syntaxhighlighter" class="brush: html"><![CDATA[

<div id="container">
      <input type="text" data-bind="value: myText, valueUpdate: 'afterkeydown'" />
      <div style="background-color: yellow;" data-bind="text: myText"></div>

      <input type="text" data-bind="value: myCustomText, valueUpdate: 'afterkeydown'" />
      <div data-bind="generic: myStuff.myBindingDefinition"></div>
      <div>Current Css Class = <span data-bind="text: myCss"></span></div>
      </div>
]]></script>

      <p>The Script....</p>

      <script type="syntaxhighlighter" class="brush: jscript"><![CDATA[
 var myStuff = function () {

        var myViewModel = function () {
            return {
                myText: ko.observable(''),
                myCustomText: ko.observable(''),
            };
        }();

        myViewModel.myCss = ko.computed(function () {
            var length = this.myCustomText().length;
            var css = '';
            if (length < 3) {
                css = 'cold';
            }
            if (length >= 3 && length < 6) {
                css = 'just-right';
            }
            if (length >= 6 && length < 9) {
                css = 'hot';
            }
            if (length >= 9) {
                css = 'way-over';
            }
            return css;
        }, myViewModel);

        var registerCustomBinding = function () {
            ko.bindingHandlers.generic = {
                init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
                    ko.applyBindingsToNode(element, valueAccessor(), viewModel);
                }
            };
        };

        var myBindingDefinition = {
            text: myViewModel.myCustomText,
            css: myViewModel.myCss
        };

        var init = function () {
            registerCustomBinding();
            ko.applyBindings(myViewModel);
        };

        return {
            'init': init,
            'myBindingDefinition': myBindingDefinition,
            'myViewModel': myViewModel
        };
    }();

    $(function () {
        myStuff.init();
    });
]]></script>

      <p>The Css</p>

      <script type="syntaxhighlighter" class="brush: css"><![CDATA[
    .cold {
        background-color: #e878d8;
    }

    .hot {
        background-color: #f23b3b;
    }

    .just-right {
        background-color: #cdcba6;
    }

    .way-over {
        background-color: #cdcba6;
    }
]]></script>

Clean up large bindings by defining them elswehere and applying them with a custom binding.

Allan Chadwick

Knockout Generic Binding