javascript - 如何仅使用 ember js 将类型 =“number” 设为正数

Question

它只是防止从向上/向下箭头输入负数，而用户可以从键盘输入负数。

 <div class="col-sm-2">
        <label>Quantity</label><br>
           {{input type="number" value=quantity min="0" class="form-control- 
           invoice"}}
</div>

Answer 1

这是数据下降，行动上升 (DDAU) 原则的一个很好的例子。数据应该向下流到您的组件(或元素)，但只有在符合特定条件时才由您的应用程序更新。可悲的是 {{input}} helper不支持DDAU原则。但是您可以在不使用它的情况下轻松实现您的目标:

<input type="number" value={{quantity}} onchange={{action "updateQuantity" value="target.value"}} min="0" >

我们使用的是标准 <input>元素并绑定(bind)它的 value属性(property)quantity .我们将自定义操作绑定(bind)到 change事件。在该操作中，我们可以检查更新后的值是否符合我们的标准，如果符合则更新 quantity .该操作可能如下所示:

actions: {
  updateQuantity(val) {
    val = parseInt(val);
    if (val >= 0) {
      this.set('quantity', val);
    } else {
      window.alert('number must not be negative');
      this.notifyPropertyChange('quantity');
    }
  }
}

请注意，我们必须调用 notifyPropertyChange()如果新值不符合我们的标准。这将触发 UI 更新以重置 <input> 的值元素。

我写了一个 Ember Twiddle 来演示这个方法:https://ember-twiddle.com/bcf03934667364252e52b21930d664fd?openFiles=templates.application.hbs%2C