Question

I have a custom binding I’m using to format percent numbers.

ko.bindingHandlers.textPercent = {
    //init: function (element, valueAccessor, allBindingsAccessor, viewModel) {
    //    //init logic 
    //},
    update: function (element, valueAccessor, allBindingsAccessor, viewModel) {
        var val = parseFloat(ko.utils.unwrapObservable(valueAccessor()));
        if ($.isNumeric(val)) {
            $(element).text((val * 100).toFixed(2))+"%";
        }
        else {
            $(element).text("#Error");
        }
    }
}

usage:

<span data-bind="textPercent: amount" ></span>

<span data-bind="textPercent: amount()/2" ></span>

It works ok but I’d like to be able to use varying number of fixed digits, so I made an extender:

ko.extenders.percent = function (target, precision) {
    var result = ko.computed({
        read: function () {
            return (target()*100).toFixed(precision)+"%";
        },
        write: function (newValue) {
            target(parseFloat(newValue) / 100);
        }
    });
    return result;
};

usage:

<span data-bind="text: amount.extend({ percent: 2 })" ></span>

<span data-bind="text: (amount()/2).extend({ percent: 2 })" ></span>

Problem is it doesn’t work with the inline calculation.

Suggestions?

http://jsfiddle.net/eRapL/4/

Answer 1

You must wrap your expression with ko.observable()

Example:

text extend percent: <span data-bind="text: ko.observable(amount() / 2).extend({ percent: 2 })" ></span><br/>

Look at: http://jsfiddle.net/c7Qx7/1/