4

パーセント数をフォーマットするために使用しているカスタムバインディングがあります。

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");
        }
    }
}

利用方法：

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

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

正常に動作しますが、さまざまな数の固定桁を使用できるようにしたいので、エクステンダーを作成しました。

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;
};

利用方法：

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

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

問題は、インライン計算では機能しないことです。

提案？

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

4

1 に答える 1

4

式をでラップする必要がありますko.observable()

例：

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

見てください：http：//jsfiddle.net/c7Qx7/1/

于 2012-05-16T22:07:09.857 に答える