增量属性与按钮和输入的交互

Ember: incrementProperty interaction with button and input

本文关键字：输入 交互 按钮 属性      更新时间：2023-09-26

我有一个数字属性，可以通过单击按钮(使用incrementProperty)或通过直接输入文本字段来更改。

当两者同时使用时，incrementProperty开始在数字的末尾添加"1"，而不是对其进行递增。

查看我修改的这个简单Ember jsbin中的问题。

复制:

  1. 在文本框中输入数字
  2. 点击+按钮。

奇怪的是，decrementProperty似乎工作正常。如果您按照上面的步骤，然后单击-按钮，似乎将值从字符串重置为数字，并且递增和递减都可以正常工作。类似地，如果您输入一个数字并单击-按钮，一切都会正常工作。这是一个错误，还是我错过了什么?

看起来incrementProperty正在执行连接操作，而不是数字加法，因为输入助手将值设置为string。

如果你看到incrementProperty方法的源代码，你可以发现下面这行应该执行增量操作。

set(this, keyName, (get(this, keyName) || 0) + increment);

这可以根据键的值执行数字相加或连接。

decrementProperty工作良好，因为-操作符没有过载。例如，"22" - 1返回21。

一个快速的修复方法是在递增之前执行类型转换。我已经修改了jsBin中的代码，以便在更改时打印值的类型。当您使用输入帮助器输入值时，可以看到它打印string。 
App.ApplicationController = Ember.Controller.extend({
    age: 36,
    ageDidChange: function () {
        console.log(typeof(this.get('age')));
    }.observes('age'),
    actions: {
        older: function() {
            this.set('age', parseInt(this.get('age'), 10) + 1);
        },
        younger: function() {
            this.decrementProperty('age');
        }
    }
});
相关文章：