我一直试图找出在Knockout-JS中显示/编辑百分比值的正确方法(更一般地说,我应该如何创建像这样的可重用组件)。
我的ViewModel有一个可观察的值,它是一个以分数存储的百分比,例如0.5代表50%。我想显示和以百分比格式编辑值(例如'50'),这样用户就不会感到困惑(他们很容易混淆)。
通过设置可写的计算函数,我能够得到一个简单的版本:参见http://jsfiddle.net/Quango/fvpjN/
然而,这不是非常可重复使用,因为需要为每个值重新实现它。我尝试使用扩展器,但这有效地掩盖了潜在的价值,因此使其无法使用。
我认为我需要的是一个绑定处理程序,所以不要写
<input data-bind="value: commission" />
我会写
<input data-bind="percentage: commission" />
我查看了knockout.js中“value”bindingHandler中的代码,但是有很多代码用于绑定,我不想复制它。
所以我的问题是:
是否有良好/标准/模板方式进行此类价值转换?
如果没有,有没有办法重新使用“值”绑定而无需复制和粘贴现有代码?
答案 0 :(得分:13)
我一直想写一个扩展器。所以这里是你的问题的另一个答案,通过一个淘汰扩展器来实现。
我仍然犹豫不决,我喜欢这个或者更喜欢Percentage类的人。
<input data-bind="value: p1.percentage, valueUpdate: 'afterkeydown'"></input>%
= <span data-bind="text: p1"></span>
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)
答案 1 :(得分:3)
如何将分数值和百分比值包装在一起,使其成为可重用的组件:
<input data-bind="value: p1.value, valueUpdate: 'afterkeydown'"></input>
<h1><span data-bind="text: p1.frac"></span> = <span data-bind="text: p1"></span></h1>
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)