Question

我正在开发一个Ember应用程序，它在输入字段中输入用户输入并以美国货币格式化，然后向用户显示格式化的值。

模板是：

<script type="text/x-handlebars" id="index">
    {{input value=savings id="userSavings"}}
    <p>Formatted Savings={{formattedSavings}}</p>
</script>

控制器是：

App.IndexController = Ember.Controller.extend({
savings:null,

formattedSavings:function(){
    return formatMoney(this.get('savings'));
}.property('savings'),

onSavingsChange:function(){
    newValue=formatMoney(this.savings);
    console.log("formatted value="+newValue);

    //this.savings=newValue;
    //$("#userSavings").val(newValue);
}.observes('savings'),

}）

formatMoney 功能是：

function formatMoney(inputNumber)
{
try {
        inputNumber = Math.round(inputNumber);
        var n = inputNumber.toString().split(".");
        n[0] = n[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",");
        return "$" + n.join(".");
    }
    catch(e) {
        console.error("Error="+e);
    }
}

我希望输入字段中的值在用户输入数字后保持美国货币格式。但它没有发生。输入字段的值绑定到 IndexController 的变量储蓄。当我得到格式化的值 newValue 时，我想在输入字段中反映这一点。

我尝试了Ember方式 this.savings = newValue 和jQuery Way $（“＃userSavings”）。val（newValue）; 但都不起作用。我可以在 formattedSavings 变量中看到输出，但它不反映在输入字段上。

当我在 jQuery only （独立的jQuery应用程序）中实现它时，它可以工作。但是当Ember出现时，它不起作用。

如何解决这个问题？

Answer 1

这里的第一件也是最重要的事情是要理解为什么它不起作用以及它对你的余烬版本的限制：

Ember不会在同一个runloop中更新模板！

因此，您唯一需要做的就是更新下一个运行循环中的值！

有很多方法可以做到这一点，但最简单的方法是使用Ember.run.next：

_savings: '',
savings: Ember.computed('_savings', function(key, val) {
    var self = this;
    if(arguments.length === 2) {
        Ember.run.next(function() {
            self.set('_savings', formatMoney(val));
        });
    }
    return Ember.get(this, '_savings');
})

您可能会找到其他可行的代码，但总是因为您在下一个runloop中更新。

Answer 2

解决方案可以是在formatMoney中声明IndexController函数，并在触发格式函数的输入中添加action

<强>控制器

App.IndexController = Ember.Controller.extend({
savings:0,

 formatMoney:function(inputNumber){


   try {

        var n = inputNumber
        .replace(/\D/g,'')
        .toString()
        .split(".");

        n[0] = n[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",");
        return n.join(".");
    }
    catch(e) {
        console.error("Error="+e);
    }
},

  actions:{

    format:function(){

            //Getting the formatted value
      var formattedSavings = this.formatMoney(this.get('savings'));

      //Setting the formated value back to savings
      this.set('savings', formattedSavings);


    }
  }


});

这是一个有效的演示http://emberjs.jsbin.com/zeruyu/edit?html,js,console,output

如何以编程方式更新ember输入字段

2 个答案: