使用Ember.js绑定文本输入中的计算属性

Question

我使用的是Bindings Computed Property in Ember TextField的答案，但希望稍微扩展它。

这里是我的模板：

{{input id="dollars" name="dollars" value=formattedDollars class="form-control"}} 

而且在我的控制器：

formattedDollars: function(key, value) { 
    var model = this.get('model'); 
    if(value) { 
     //This is the setter--make sure the stored value is an integer 
     model.set('dollars', +value.toString().replace(/[^\d]/, "")); 
    } else { 
     //This is the getter--return a formatted value 
     return model.get('dollars').toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","); 
    } 
}.property('model.dollars') 

这个作品，如果我设置formattedDollars外的文本字段（如model.incrementProperty('dollars', 10)），但如果我真的中键入文本输入，值不保留格式。

我试过在setter中也返回value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")，但是这也不起作用。我如何做到这一点，以便在dollars输入字段中输入数字自动格式化？

Answer 1

您必须在两种情况下返回值 - 获取或设置计算属性时。 所以，你的代码应该是：在这两种情况下

formattedDollars: function(key, value) { 
 
    var model = this.get('model'); 
 
    if(arguments.length > 1) { 
 
     //This is the setter--make sure the stored value is an integer 
 
     model.set('dollars', +value.toString().replace(/[^\d]/, "")); 
 
    } 
 
    //This is the getter--return a formatted value 
 
    return model.get('dollars').toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","); 
 
    
 
}.property('model.dollars')