Ember.js 将余烬数据数值属性与`<;输入类型=";“数字”&燃气轮机` 理解isDirty——一个简单的情况,结果出乎意料

Ember.js 将余烬数据数值属性与`<;输入类型=";“数字”&燃气轮机` 理解isDirty——一个简单的情况,结果出乎意料,ember.js,casting,ember-data,Ember.js,Casting,Ember Data,在我回答我的问题之前,先来点背景知识。我有一个余烬数据项目 DEBUG: ------------------------------- DEBUG: Ember : 1.11.1 DEBUG: Ember Data : 1.0.0-beta.16.1 DEBUG: jQuery : 1.11.2 DEBUG: Ember Simple Auth : 0.7.3 DEBUG: ------------------------------

在我回答我的问题之前,先来点背景知识。我有一个余烬数据项目

DEBUG: -------------------------------
DEBUG: Ember             : 1.11.1
DEBUG: Ember Data        : 1.0.0-beta.16.1
DEBUG: jQuery            : 1.11.2
DEBUG: Ember Simple Auth : 0.7.3
DEBUG: -------------------------------
余烬数据模型 我有一个简单的模型,其中包含一些字符串属性和一些数字属性。这是我的
app\models\simplemodel.js

import DS from "ember-data";

export default DS.Model.extend({
  code: DS.attr('string'),
  description: DS.attr('string'),
  a_number: DS.attr('number'),
  another_number: DS.attr('number'),
  related_stuff: DS.hasMany('someothermodel', {async: true})
});
带有绑定的
元素的把手模板 我有一个模板,其中使用绑定的
元素设置数字参数

<header>
  <h2>{{model.code}}</h2>
  <h2>{{textarea value=model.description placeholder="description"}}</h2>
</header>
<section>
  <p>
      <label>A number:&nbsp;</label>{{input type="number" value=model.a_number}}
      <label>Another number:&nbsp;</label>{{input type="number" value=model.another_number}}
    {{#if model.isDirty}}
      <button {{action 'save'}}>Save</button>
    {{/if}}
  </p>
</section>
这是意料之中的,ember data处理与服务器的通信,并将
DS.attr('number')
属性转换为numbers。因此,我猜在发送到服务器之前,model属性的实际值仍然是一个字符串,因此model
isDirty

支持这一点的一个简单测试是,如果我将属性更改为
A_number:DS.attr('string')
,那么问题就会消失。对于字符串属性,
isDirty
标志在我更改输入元素时翻转,在我将输入返回到原始值时翻转。当然,这会将数据作为字符串发送到服务器

问题 问题似乎是当将输入元素中的字符串与模型中的原始数字进行比较时,
isDirty
过于敏感。即使输入字段提供了字符串,我是否可以将model属性设置为数字

可能的解决方案 我可以看到两种明显的方法来处理这个问题

  • 制作一个透明地将字符串转换为数字的输入元素的版本——我尝试了这个,但运气不好——可能是因为我不理解余烬是如何工作的
  • 将模型值自动转换为适当的类型
  • 我的本能是选择
    1
    ,因为
    2
    感觉更可能产生意外行为

    我的尝试 我试图生成一个组件,用于绑定到数字的所有输入元素

    import Ember from 'ember';
    
    export default Ember.Component.extend({
        attributeBindings: ['value', 'type'],
        tagName: 'input',
        type: 'number',
        number: null,
    
        value: function() {
          var number = this.get('number');
          return number;
        }.property('number'),
    
        change: function() {
          var value = this.$().val();
          this.set('number', parseFloat(value));
        }
    });
    

    当我使用它时,
    isDirty
    标记根本没有设置,即使我的组件的值发生了更改。无论如何,我不明白这一点,它是根据我一直用于日期字段的内容改编的。是否需要在此处执行其他操作?

    来自文档-“如果此属性为true,则记录处于脏状态。该记录具有适配器尚未保存的本地更改。这包括已创建(但尚未保存)或已删除的记录。”更改回值并不意味着该记录不会脏,它仍然是脏的,因为它已经被改变了。您可以与旧值和新脏值进行比较,如果它们匹配,则执行
    回滚()
    -“如果模型为脏,则此函数将放弃任何未保存的更改”@Craicerjack。但是,我注意到,当我编辑模型中的字符串属性(如
    description
    属性)时,
    isDirty
    标志会相应地打开和关闭。您可以创建原始模型记录的Ember.copy,并将复制的对象与当前状态模型值进行比较“例如this.set('copiedObject',Ember.copy(this.get)”(loadedModel));“问题似乎是,当将输入中的字符串与模型中的原始数字进行比较时,isDirty过于敏感。即使输入字段提供字符串,我是否可以以某种方式将模型属性设置为数字?
    import Ember from 'ember';
    
    export default Ember.Component.extend({
        attributeBindings: ['value', 'type'],
        tagName: 'input',
        type: 'number',
        number: null,
    
        value: function() {
          var number = this.get('number');
          return number;
        }.property('number'),
    
        change: function() {
          var value = this.$().val();
          this.set('number', parseFloat(value));
        }
    });