Javascript 带字符的敲除附加观察值

我在KnockoutJS应用程序中有可观察对象，它们的值是从应用程序中全局包含的数组中获取的，例如：

self.observable = ko.observable(App[0].Observable_Value);

为了方便起见，我们假设可观测的_值=10

这是您期望的工作方式，self.observate绑定到的

默认具有正确的值；十,

我现在想做的是在

中添加一个%作为可观察对象，这样在输入字段中显示的输出将是10%

我只想在输入值后面加上一个%，因为我需要可观察值作为一个数字而不是一个字符串可读，以防止以后在应用程序中出现NaN错误。该应用程序严重依赖数字

我曾经尝试过用read/write&parseFloat作为一个计算函数来实现这一点，但没有成功

---

有什么想法吗？

我认为在这种情况下，最好的选择是一个

我只想在输入值后面加上一个%，因为我需要可观察值作为一个数字而不是字符串可读

这正是绑定处理程序所能做的——保留可观察对象的原始值，但改变其显示方式

我试着把它作为一个计算函数

虽然一个计算函数可以做到这一点，但它通常是不必要的，除非您想实际处理来自计算函数的返回值。在这种情况下，因为您只想更改视觉显示，所以不需要另一个表示相同值的变量

这是一个非常基本的方法，它只是在可观测值前面加上一个

%

符号

---

您可以添加一个读/写可计算表，该表将添加显示百分比，然后在设置基础值时将其删除：

---

是的，在你发布小提琴之前，我刚刚做了一件类似的事情，非常感谢！我仍然是一个新手！呃，刚刚遇到一个新错误。一旦您进入并用%更新值，页面上显示的总数将变为NaN，因为%正在干扰@你能做一把小提琴（或修改我的）来重现这个问题吗？

ko.bindingHandlers.percent = {
    init: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
        var value = ko.unwrap(valueAccessor());
        $(element).text('%' + value);
    }
};

ko.observable.fn.formatAsPercent = function() {
    var base = this;
    return ko.computed({
        read: function() {
            return base() + "%";
        },
        write: function(newValue) {
            base(parseInt(newValue.replace('%', '')));
        }
    });
};

function ViewModel() {
    var self = this;
    self.number = ko.observable(10); // actual number
    self.percent= self.number.formatAsPercent(); // used for binding to show %
}

var my = { vm : new ViewModel() };

ko.applyBindings(my.vm);