javascript - 如何限制 ko.observable 并将剩余部分放入另一个字段

Question

我有一个ko.observable，称为Amount，它存储一个数值。我需要一种将数值限制在特定上限的方法（上限由同一 ViewModelko.computed中称为Max的 a 提供。）当用户尝试输入超过Max的Amount值时，我想采用overage 并将其应用于另一个，称为Overage，并且也不允许Amount的值超过Max的值。如何实现？ko.observable

Answer 1

您最有可能扩展您的 observable，具体取决于您想要实现的目标。这应该给你一个很好的方向（我还没有把它扔进小提琴来测试它） -

ko.extenders.overage = function(target, max) {
    target.overage = ko.observable();
    var result = ko.computed({
        read: target,
        write: function(newValue) {
            var current = target(),
                valueToWrite = newValue > max ? max : newValue

            if (valueToWrite === max) {
                target.overage(current - max);
                target(valueToWrite);
            } else {
                target.notifySubscribers(valueToWrite);
            }
        }
    });

    result(target());

    return result;
};

function AppViewModel(one) {
    this.myNumberOne = ko.observable(one).extend({ overage: 500 });
}

ko.applyBindings(new AppViewModel(221.2234));

现在，您的 observablemyNumberOne有一个扩展属性，要求您扩展它时设置overage的任何额外数量max（在本例中为 500），myNumberOne 或您扩展的任何其他 observable 的值将上限为 500，并将附加值传递为超龄。

在您看来，您可以使用这样的东西 -

<span data-bind="text: myNumberOne"></span>
<!-- ko if: myNumberOne().overage -->
    Overage amount - <span data-bind="text: myNumberOne().overage"></span>
<!-- /ko -->

或者

<span data-bind="text: myNumberOne"></span>
<div data-bind="text: $data.myNumberOne().overage"></div>

http://jsfiddle.net/DNxHu/

扩展它并订阅它，不要使用计算，等等......检查小提琴