Knockout追加带有角色的可观察物

时间:2014-04-18 19:48:04

标签: javascript jquery knockout.js knockout-2.0

我的KnockoutJS应用程序中有observable,它们的值是从应用程序中全局包含的数组中提取的,例如:

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

为方便起见,我们说Observable_Value = 10.

这正如您所期望的那样,并且{。{1}}默认情况下self.observable被绑定为具有正确的值; 10。

我现在要做的是在<input>中附加带有的observable,以便输入字段中显示的输出为10%。

我只想用附加输入值,因为我需要将observable作为数字读取,字符串以防止以后出现NaN错误该应用程序。该应用程序在很大程度上依赖于数字。

我尝试将此作为具有读/写&amp ;;的计算功能。 parseFloat但没有成功。

有什么想法吗?

2 个答案:

答案 0 :(得分:2)

我认为在这种情况下最好的选择是custom binding handler

  

我只想用%附加输入值,因为我需要observable可读作为数字而不是字符串

这正是绑定处理程序可以做的事情 - 保留observable的原始值,但改变它的显示方式。

  

我已尝试将此作为计算函数

虽然计算函数可以做到这一点,但通常是不必要的,除非你想实际使用计算中的返回值。在这种情况下,由于您只想更改可视显示,因此不需要另一个表示相同值的变量。

这是一个非常基本的,只是在{obonable'值前面加上一个%符号。 See fiddle

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

答案 1 :(得分:0)

您可以添加一个读/写可计算项,用于添加显示百分比,然后在设置基础值(fiddle)时将其删除:

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