删除敲除绑定表达式的美元符号答案

【问题标题】：Removing the Dollar Sign for Knockout Binding Expression删除敲除绑定表达式的美元符号
【发布时间】：2016-03-30 04:12:47
【问题描述】：

我有一个绑定到淘汰模型的 TextBox。现在，在 TextBox 中，用户可以输入“0.00”、“4.95”等成本。但他们也可以输入这样的美元符号：“$50.00”和“$6.00”。

当用户输入美元符号时，模型会中断，因为它需要一个十进制值。我想知道是否有某种方法可以删除下面数据绑定表达式中的美元符号：

<input type="text" id="cost" data-bind="value: selectedChoiceValue" />

【问题讨论】：

是否允许它接受一个字符串值，但对字符串运行一些验证（在删除前导 '$' 后，如果有的话）以检查它是否为数字？
或使用number 类型作为输入字段

标签： javascript knockout.js

【解决方案1】：

尝试转义字符串中的 $。

例子：

\$5.00

【讨论】：

但用户是输入美元符号的人。
您仍然可以在他们输入美元符号时添加转义字符。只需评估他们输入的字符串，如果它包含 $，则转义它。

【解决方案2】：

var price = $("#cost").val().replace("$", "");

但需要注意的是data属性是只读的。这意味着如果您在页面加载后更新 data 属性中的值，然后尝试通过 $("#cost").data("bind") 检索它，它将不会返回更新后的值。

如果您必须修改然后检索更新的数据属性，则必须使用 .attr("data-bind")

【讨论】：

【解决方案3】：

你也可以使用

var without_dollar_sign = $("#cost").val().replace(/\$/g, '');
$("#cost").val(without_dollar_sign)

【讨论】：

他使用的是 Knockout，而不是 jQuery。

【解决方案4】：

将字段绑定到可写计算。如果验证成功，则将新值写入您的数字 observable；如果没有，请进行一些错误处理。计算的读取组件可以根据需要进行一些格式化或不进行格式化。

function toNumber(stringValue) {
  if (stringValue[0] == '$') {
    stringValue = stringValue.substr(1);
  }
  var result = parseFloat(stringValue);
  return result;
}

vm = {
  cost: ko.observable(0),
  costAsString: ko.pureComputed({
    deferEvaluation: true,
    read: function() {
      return '$' + vm.cost();
    },
    write: function(newValue) {
      var numberValue = toNumber(newValue);
      if (isNaN(numberValue)) {
        alert('Invalid number');
        var revert = vm.cost();
        vm.cost('');
        vm.cost(revert);
      } else {
        vm.cost(numberValue);
      }
    }
  })
};
ko.applyBindings(vm);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<input type="text" id="cost" data-bind="value: costAsString" />
<div>Value is: <span data-bind="text: cost"></span>
</div>

【讨论】：

【解决方案5】：

老实说，我认为最好的方法是使用 html5 number 输入字段：

<input type="number" id="cost" data-bind="value: selectedChoiceValue" />

如果您想要一个淘汰赛解决方案，您可以使用像 Roy J 的答案这样的可观察/计算组合，或者您可以使用单个可观察并订阅和小跑：

var vm = function(){
  this.selectedChoiceValue = ko.observable('');
  
  // Just to make sure things do go crazy
  this.selectedChoiceValue.extend({ rateLimit: 10 }); // in ms
  
  this.selectedChoiceValue.subscribe(function(newValue){
    // Assuming you'll want to also parse out other invalid characters
    newValue = yourFunctionToParseTheInput(newValue);
    
    // Update this value to be the parsed valued 
    this.selectedChoiceValue(newValue);
  
  }, this);
}

function yourFunctionToParseTheInput(value) {
  return value.replace('$', '');
}

ko.applyBindings(vm);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<span class="currency">$<input type="text" id="cost" data-bind="value: selectedChoiceValue, valueUpdate:['afterkeydown']" /></span>

Restricting input to textbox: allowing only numbers and decimal point 也有一些很好的方法来解析输入值。

【讨论】：