7

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

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

可写计算

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

但是，这不是很可重用，因为它需要为每个值重新实现。我尝试了一个扩展器，但这有效地掩盖了底层价值，因此使其无法使用。

绑定处理程序

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

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

我会写

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

我查看了 knockout.js 中“值”bindingHandler 中的代码，但是那里有很多用于绑定的代码，我不想复制它。

所以我的问题是：

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

  2. 如果没有，有没有办法重新使用“值”绑定而不必复制和粘贴现有代码？

4

2 回答 2

15

我一直想写一个扩展程序。因此，您的问题的另一个答案是通过淘汰赛扩展器实现的。

我还没有决定是我喜欢这个还是百分比类更好。

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/

于 2013-01-31T18:01:59.167 回答
3

如何将分数值和百分比值包装在一起，使其成为可重用的组件：

HTML

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

JavaScript

function Percentage(frac) {
    this.frac = ko.observable(frac);
    this.value = ko.computed({
        read: function() {
            return this.frac() * 100;
        },
        write: function(value) {
            this.frac(value/100);
        },
        owner: this
    });
}

Percentage.prototype.toString = function() {
    return this.value() + '%';
}

var model = {
    p1: new Percentage(0.5)
}

ko.applyBindings(model)

现场演示

http://jsfiddle.net/9kCkm/1/

于 2013-01-31T17:43:28.513 回答