Question

在我的ember应用程序中，我希望在提交表单后立即重用模型属性。但是，除非我重新加载整个路线，否则商店似乎将其保持为字符串。我正在使用this和以下组件：

Ember      : 1.12.0
Ember Data : 1.0.0-beta.18
jQuery     : 1.11.3

/app/models/purchase.js

import DS from 'ember-data';

export default DS.Model.extend({
  name: DS.attr('string'),
  amount: DS.attr('number'),
  createdAt: DS.attr('date', {
    defaultValue: function() { return new Date(); }
  }),

  .. other callback and associations..
});

/app/controllers/ledger/purchases/new.js

import Ember from 'ember';

export default Ember.Route.extend({
  model: function () {
    return {
      newPurchase: this.store.createRecord('purchase', {
        name: null,
        amount: null,
        player: null
      })
    }
  }
});

/app/templates/ledger/purchases/new.hbs

<div class="row">
  <div class="col-xs-12">
    <h4>New purchase</h4>
    <form>
      <div class="form-group">
        <label for="name" class="sr-only control-label">name</label>
        {{input id='name' type="text" value=newPurchase.name placeholder="What" class="form-control"}}
      </div>
      <div class="form-group">
        <label for="amount" class="sr-only control-label">amount</label>
        {{input id='amount' type='number' value=newPurchase.amount placeholder="How much" class="form-control"}}
      </div>
     <div class="form-group">
        <button type="submit" class="btn btn-success" {{action "create"}}>create</button>
        {{#link-to 'ledger.purchases' tagName="button" class="btn btn-link" }}cancel{{/link-to}}
      </div>
    </form>
  </div>
</div>

/app/controllers/ledger/purchases/new.js

import Ember from 'ember';

export default Ember.Controller.extend({
  newPurchase: Ember.computed.alias('model.newPurchase'),

  actions: {
    create: function() {
      var np = this.get('newPurchase');
      console.log(Ember.typeOf(np.get('amount')));
      ........
      save np etc...
    }
  }
});

控制台日志调用清楚地显示类型为string。余烬检查员也是如此。但是数据被正确保存到后端，因为重新加载后一切都很好。但是一旦提交，我就需要将金额作为数字，因为我用它来制作并显示所有购买的总和。

Answer 1

好的，我想我知道发生了什么。将输入类型设置为数字在这里不会有帮助。值仍被识别为字符串。通常当你提交表单时，无论如何都会向后端返回这个格式化为数字和值的问题。即使您使用数字模拟数据而没有后端，也可以看到这一点。

我的解决方案是使用输入组件的计算属性。型号：

export default DS.Model.extend({
  name: DS.attr('string'),
  amount: DS.attr('number'),
  createdAt: DS.attr('date', {
    defaultValue: function() { return new Date(); }
  }),

  amountAsNum: Ember.computed('amount', {
    get: function () {
      return parseFloat(this.get('amount'));
    },
    set: function (key, value) {
      var valueToSet = parseFloat(value);
      this.set('amount', valueToSet);
      return valueToSet;
    }
}),

  .. other callback and associations..
});

模板：

{{input id='amount' type='number' value=newPurchase.amountAsNum placeholder="How much" class="form-control"}}

现在，您可以在保存之前检查typeof(amount)，它会给您number。 Demo on JS Bin.

ember-data存储字符串而不是数字

1 个答案: