错误：检测到无限渲染失效

Question

我有一个 Ember 应用，其版本如下：

DEBUG: Ember             : 3.0.0
DEBUG: Ember Data        : 3.0.2
DEBUG: jQuery            : 3.3.1
DEBUG: Ember Dialog      : 3.1.0
DEBUG: Ember Simple Auth : 1.6.0

我有一个将数据提取到模型中的路由，并且该数据被传递到组件中。每当我向这个组件添加一个关闭操作时，我都会得到一个

Error: infinite rendering invalidation detected

每当我删除关闭操作代码时，一切正常。

路线代码：

import Route from '@ember/routing/route';
import { inject as service } from '@ember/service';

export default Route.extend({
  currentUser: service('current-user'),

  model() {
    return this.store.findAll('account');
  },

  actions:{
    saveNewCustomer() {

    }
  }
});

导致错误的模板：

<div class="panel panel-primary">
    <div class="panel-heading">
        <h2 class="panel-title">{{t 'account.modals.new_customer.title'}}</h2>
    </div>

    {{account/customers/filter-accounts
            accounts=model
            currentUser=currentUser
            customerAdded=(action "saveNewCustomer")}}

</div>

模板工作：

<div class="panel panel-primary">
    <div class="panel-heading">
        <h2 class="panel-title">{{t 'account.modals.new_customer.title'}}</h2>
    </div>

    {{account/customers/filter-accounts
            accounts=model
            currentUser=currentUser)}}

</div>

组件的代码在这里：

import Component from '@ember/component';

export default Component.extend({
  actions:{
    selectedAccount(account) {
      this.set('selectedAccount', account);
      this.toggleProperty('newCustomerModal');
    },

    toggleNewCustomerModal() {
      this.toggleProperty('newCustomerModal');
    },

    saveNewCustomer() {
      this.get('customerAdded')();
    },
  }
});

以及组件模板：

<div class="form-modal-content">
    <div class="el-input-wrap">
        <label class="el-input-label sr-only">Søk</label>
        {{input placeholder="Søk etter..." class="el-input"}}
    </div>
</div>

<div class="list-group">
    {{#each accounts as |account|}}
        <a href="#" class="list-group-item">
            {{account.accountName}}<br>
            {{#each account.addresses as |address|}}
                {{address.displayAddressLine}}<br>
            {{/each}}
        </a>
    {{/each}}
</div>

{{#if newCustomerModal}}
    {{#modal-dialog
            close='toggleNewCustomerModal'
            targetAttachment="none"
            translucentOverlay=true}}
        <div class="modal-full">
            <form class="form-modal" {{action 'saveNewCustomer' on='submit'}}>
                <header class="form-modal-header">
                    <a title="Close" class="modal-close" href="#" {{action 'toggleNewCustomerModal'}}>{{fa-icon 'times'}}</a>
                    <h2>Legg til kunde</h2>
                </header>

                <div class="form-modal-content clearfix">
                    <h2>{{selectedAccount.accountName}}</h2>
                </div>

                <div class="flex flex-full">
                    <button type="button" class="form-modal-button cancel" {{action 'toggleNewCustomerModal'}}>Avbryt</button>
                    <button type="submit" class="form-modal-button">Lagre</button>
                </div>
            </form>
        </div>

    {{/modal-dialog}}
{{/if}}

我不确定这是否是我犯的一个我看不到的愚蠢错误，或者是否存在错误。我相信前者。

谢谢

Answer 1

解决方案：移动控制器或使用像https://github.com/DockYard/ember-route-action-helper 这样的插件将解决问题。

原评论：saveNewCustomer 是在哪里定义的？请注意，动作助手将在当前控制器而不是路由上查找动作。如果你想在你的路由中实现你的动作，请使用这个插件