Ember.js 如何仅在值第一次更改时执行CP？

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

我的处境有点棘手

父模板：

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

{{#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}}

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

组件的计算属性：

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

组件模板：

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

{{#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}}

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

{{{#if hasrerrors}
{{#如果存在}
必须存在
{{/if}
{{#如果最小值}
必须小于{{minimum}
{{/if}
{{/if}
{{yield}}

在页面加载时<代码>值将始终为空。这意味着此CP将返回

false

，从而触发模板显示错误

我只希望在

值

在任何时候发生更改时执行此CP

也就是说。在页面加载时，如果

值

为空。不要显示任何错误。但是，如果用户键入一个值，然后将其删除。这是CP执行的时间（返回

false

）

---

有什么建议吗？

如果您使用的是最新的余烬，您可以在组件模板中尝试以下内容：

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

{{#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}}

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

---

基本上，如果字段与其初始值相同，则希望该字段始终有效。所以，我们只需要在init time上保存它，并将其与当前值进行比较

shouldValidate

就像一个开关，让我们知道值是否已更改。示例组件：

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

//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）

方法。通过这种方式，您可以对该组件进行子类化，并重写该方法，从而保留所有初始值逻辑。例如：

//app/components/positive-validation-component.js
export default BaseValidationComponent.extend({
  validate(value) {
    return value > 0;
  }
})

---

出于好奇，实现的哪一部分需要最新版本的ember？我认为将操作添加到

oninput

require至少1.13I进行了编辑以包括模板，以便您了解结构的要点。希望在操作之外进行这种验证处理。可能使用计算属性，如果是最后手段，则使用观察者。