KnockoutJS中价值转换的最佳方法？

Question

我一直试图找出在Knockout-JS中显示/编辑百分比值的正确方法(更一般地说,我应该如何创建像这样的可重用组件).

我的ViewModel有一个可观察的值,它是一个存储为小数的百分比,例如0.5代表50%.我想以百分比格式显示和编辑值(例如'50'),这样用户就不会感到困惑(他们很容易混淆).

可写的计算机

通过设置可写的计算函数,我能够得到一个简单的版本:参见http://jsfiddle.net/Quango/fvpjN/

但是,这不是非常可重用,因为需要为每个值重新实现它.我尝试使用扩展器,但这有效地掩盖了潜在的价值,因此使其无法使用.

BindingHandlers

我认为我需要的是一个绑定处理程序,所以不要写

<input data-bind="value: commission" /> 

我会写的

<input data-bind="percentage: commission" />

我查看了knockout.js中"value"bindingHandler中的代码,但是有很多代码用于绑定,我不想复制它.

所以我的问题是:

1. 是否有良好的/标准/模板方式来进行这种价值转换？

2. 如果没有,有没有办法重新使用"值"绑定而无需复制和粘贴现有代码？

Answer 1

我一直想写一个扩展器.所以这里是你的问题的另一个答案,通过一个淘汰扩展器来实现.

我仍然犹豫不决,我喜欢这个或者Percentage类更好.

HTML

<input data-bind="value: p1.percentage, valueUpdate: 'afterkeydown'"></input>%
= <span data-bind="text: p1"></span>

JavaScript的

ko.extenders.percentage = function(target, option) {
    target.percentage = ko.computed({
        read: function() {
            return this() * 100;
        },
        write: function(value) {
            this(value/100);
        },
        owner: target
    });
    return target;
};

var model = {
    p1: ko.observable(0.5).extend({'percentage': true})
}

ko.applyBindings(model)

现场演示

http://jsfiddle.net/DWRLr/