订阅一个属性 - 在knockoutjs中 - 设置本身会造成问题吗?

时间:2011-03-09 14:51:58

标签: knockout.js recursive-databinding

我正在使用knockoutjs处理不同的事件 - 其中一个是我想在价格输入字段中添加一千个分隔符。

所以我在我的价格字段中订阅了一个更改事件,并且添加了丢失的分隔符并将其写回到价格字段中。写回价格字段会触发新的更改事件,因此,我需要检查以打破循环 - 我通过询问值是否实际更改来执行此操作:

    this.listingPriceFormatted.subscribe(function (newValue, model) {
        var cleanValue = newValue.toString().replace(/\D/g, '');
        $('#Price').val(cleanValue);
        var outValue = MySite.Utilities.addThousandSeperator(cleanValue);
        if (newValue != outValue) {
            me.listingPriceFormatted(outValue);
        }
    });

我真的不喜欢触发相同的事件两次只是为了设置一次值 - 有没有办法我可以回写到字段而不再触发事件,或者我这样做是错误的吗?

1 个答案:

答案 0 :(得分:3)

在这种情况下,绑定到writable dependentObservable可能是该工作的正确工具。这将允许您控制字段的读取和设置方式。

例如,如果你有一个listingPrice observable,那么你可以有一个listingPriceFormatted可写的dependentObservable。您可以将字段绑定到listingPriceFormatted。它看起来像是:

viewModel.listingPriceFormatted = ko.dependentObservable({ 
   read: function() { 
               //add commas
               return MySite.Utilities.addThousandSeperator(this.listingPrice());
          },
   write: function(newValue) {
              //strip commas and store in listingPrice
              this.listingPrice(MySite.Utilities.stripThousandSeperator(newValue));
          }
   }, viewModel);

此功能是在1.12之后添加的,因此您需要使用GitHub中的代码的更高版本。希望这可以帮助。

此外,在本文的最后,将observable和dependentObservable封装到一个可能对您有用的对象中是一个想法:http://www.knockmeout.net/2011/03/guard-your-model-accept-or-cancel-edits.html