Question

I have a data-bind that has a lot of logic in it. Currently I have to paste it several places to get what I want. I would like to be able to make it a function that is only in one place preferably as a method of the KO object. The data-bind I need to move is the one that creates the italicized count text.

data-bind="text: ($data.children)?($data.children.filter(function(e){return e.enabled()}).length + ' Children On'):('No Children')"

http://jsfiddle.net/5UeND/6/

Answer 1

You can create a function on your main viewmodel which returns a ko.computed with the calculation:

self.childrenCounter = function(data) {
        return ko.computed(function() {
            return (this.children) ? (this.children.filter(function(e) {
                return e.enabled()
            }).length + ' Children On') : ('No Children')
        }, data);
    }

Then you can use like this inside in your template:

<i data-bind="text: $root.childrenCounter($data)"></i>

Demo JSFiddle.