淘汰赛 - 无法更新使用订阅(由于扩展验证)可观察值(Knockout - Can't up

2019-10-18 01:01发布

我试图实现下面的建议但既不似乎每一个值更新时间触发所需的反应。 这可能是由于我的实现,我是新来的淘汰赛。

我有被绑定到一个TextBoxFor可观察到的(金额)。

@Html.TextBoxFor(m => m.Amount, new { type = "number", data_bind = "value: Amount" })

当输入值时,它需要被验证,以确保它不超过999999。除此之外,如果该值小于50则需要将其设定为50。这些检查需要每次'来进行量”的变化。

var viewModel = {
    Amount: ko.observable().extend({numeric: 0, max: 999999})
};

我已经试过落实解决的(在回答我以前的帖子),但我不能让这些工作。

最好的我想出了正在创建一个计算如下。 这种检查输入值,并在第一次尝试正确更新。 随后值的改变不会触发屏幕上的变化,但步进通过代码,似乎更新ViewModel.Amount值。

@Html.TextBoxFor(m => m.Amount, new { type = "number", data_bind = "value: amountMin" })


quoteVehicleViewModel.VehicleMileage = ko.observable(0);


viewModel.amountMin = ko.computed({
    read: function () {
        return viewModel.Amount();  
    },
    write: function (value) {
        if (value < 50) {
            viewModel.Amount(50);
        }
    }
}).extend({ numeric: 0, max: 999999 });

** A“viewModel.Amount()”中的控制台中输入显示值作为是1000,但在屏幕上的值仍然示出了作为输入值。

任何帮助感激地接受

约翰

Answer 1:

据我所知淘汰赛验证不提供直接从规则定义访问任何可观察到的能力。 如果这是可能的,你可以就在一个自定义的验证规则强制值。

我发现最好的方法是创建您要强迫每个规则的自定义扩展。

下面是“最小”规则为例强迫扩展:

  ko.extenders.coerceMin = function (target, enable) {
      //collect rule values
      var minRule = ko.utils.arrayFirst(target.rules(), function (val) {
          return val.rule === "min"
      });
      if (minRule === null) {
          throw Error("coerceMin extender must be used in conjunction with the 'min' knockout validation rule");
      }
      var minValue = minRule.params;
      //listen for changes and coerce when necessary
      var subscription = null;
      if (enable && !subscription) {
          subscription = target.subscribe(function (newValue) {
              if (!isNaN(newValue)) {
                  var newValueAsNum = parseFloat(+newValue);
                  var valueToWrite = newValueAsNum < minValue ? minValue : newValueAsNum;
                  //only write if it changed
                  if (valueToWrite !== newValue) {
                      target(valueToWrite);
                  }
              }
          });
      } else {
          if (subscription) {
              subscription.dispose();
          }
      }

      //return the original observable
      return target;
  };

您可以在视图模型应用它就像这样:

var viewModel = {
    Amount: ko.observable()
              .extend({numeric: 0, min: 50, max: 999999})
              .extend({coerceMin: true});
};

这里有一个小提琴证明: http://jsfiddle.net/f2rTR/1/



Answer 2:

非常类似的问题在这里: 让淘汰赛applyBindings治疗选择选项数

尽管认购你可以做计算值。 它会像:

var viewModel = {
    _amount: ko.observable(100).extend({numeric: 0, max: 999999, reset: true}),
    Amount : ko.computed(function(){
       return _amount < 50 ? 50 : _amount;
   })
};


ko.applyBindings(viewModel);

编辑

我也看了,你在这里使用的扩展。 你可以添加到您的扩展最小值,并通过它你可观察的参数。 你必须写明明在你扩展的方法写一些代码

就像是:

ko.extenders.numeric = function(target, min) {
...
   write:function(v){
      ...
      if(v<50) v=50;
      ...
      target(v)


   }
...
}


文章来源: Knockout - Can't update Observable value using Subscribe (due to extension validation)