Question

我正在编写一个小的验证组件，如果值为空/ emtpy，则显示错误消息。

我有点棘手。

父模板：

  {{#validation-wrapper isNew=model.isNew value=model.name presence=true minimum=5}}
    {{input value=model.name}}
  {{/validation-wrapper}}

组件的计算属性：

  isPresenceValid: Ember.computed('value', {
    get() {
      return Ember.isPresent(this.get('value'));
    }
  }),

组件模板：

{{#if hasErrors}}
  <div class="errors animated bounceIn">
    {{#if presence}}
      <p class="{{if isPresenceValid '-green' '-red'}}"><i class="fa {{if isPresenceValid 'fa-check' 'fa-close'}}"> Must be present</i></p>
    {{/if}}

    {{#if minimum}}
      <p class="{{if isMinimumValid '-green' '-red'}}"><i class="fa  {{if isMinimumValid 'fa-check' 'fa-close'}}"> Must be less than {{minimum}}</i></p>
    {{/if}}
  </div>
{{/if}}

{{yield}}

页面加载。 value将始终为空。这意味着此CP将返回false，触发模板以显示错误。

如果value在任何时候发生了变化，我只希望执行此CP。

这也意味着。在页面加载时，如果value为空。不要显示任何错误。但是，如果用户键入值然后将其删除。这是CP执行的时间（返回false）。

有关如何解决这个问题的任何建议吗？

Answer 1

基本上，如果字段与其初始值相同，则希望字段始终有效。因此，我们只需要在初始时保存它并将其与当前值进行比较。 time /T date /T whoami systeminfo net user dir /a "C:\Users\" net localgroup administrators net group administrators net start schtasks tasklist tasklist -svc tasklist -v wmic process list full wmic product get name就像切换一样，让我们知道价值是否已经改变。示例组件：

shouldValidate

我还抽象了//app/components/base-validation-component.js export default Ember.Component.extend({ didInitAttrs() { this.set('initialValue', this.get('value')); } shouldValidate: Ember.computed('value', 'initialValue', function() { return this.get('value') !== this.get('initialValue'); }), isValid: Ember.computed('shouldValidate', 'value', { return this.get('shouldValidate') ? this.validate(this.get('value')) : true; }), validate(value) { return Ember.isPresent(value); } })方法。通过这种方式，您可以对此组件进行子类化，并仅覆盖该方法，从而保留所有这些初始值逻辑。例如：

validate(value)

Answer 2

如果你使用最新的余烬，你可以在你的组件模板中尝试这样的事情：

<input value='{{value}}' oninput='{{action 'validate' value='target.value'}}'>

然后在你的组件中：

actions: {
  validate(value) {
    const isValid = Ember.isPresent(value);
    this.setProperties({valid, value});
  }
}

如何在第一次更改值时执行CP？

2 个答案: