Question

I have a custom binding I am using to truncate a description in an observable array. I am just wondering the best way to go about changing the text that is returned to the binding.

    ko.bindingHandlers.summarize = { 
        init: function(element, valueAccessor, allBindingsAccessor, context) {
            var pattern = new RegExp(/^[^.]+/);
            var summarized = pattern.exec(context.description());
            //How do I set the text to the summarized value?
        }
    }

The broad description is used elsewhere on the page. This truncated version is used in the sidebar. Open to suggestions about a better way to go about this but this seemed like the best way to me.

The viewModel is generated from a JSON file via the mapping plugin or I would just add in a truncated version directly in the viewmodel.

Thanks for taking a look at things.

Answer 1

Here is what I did. It was simple once I looked at the source of the knockout Library. I would highly recommend digging around in the library code. It is invaluable for learning.

ko.bindingHandlers.summarize = { 
    init: function(element, valueAccessor, allBindingsAccessor, context) {
    var pattern = new RegExp(/^[^.]+/);
    var summarized = pattern.exec(context.description());
    typeof element.innerText == "string" ? element.innerText = summarized
                                         : element.textContent = summarized;
    }
}

To use it in a template you would simply:

<p data-bind='summarize: description'></p>

Where description would be an observable.