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

【问题标题】：Binding a computed property in a text input with Ember.js使用 Ember.js 在文本输入中绑定计算属性
【发布时间】：2014-09-22 13:24:30
【问题描述】：

我正在使用来自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 输入字段中键入自动格式化数字？

【问题讨论】：

标签： ember.js

【解决方案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')

【讨论】：