错误:检测到无限呈现失效

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 这样的插件来解决问题。

原文评论：保存新客户在哪里定义？请注意，操作帮助程序将在当前控制器上查找操作，而不是路由。如果您想在路由中实现您的操作，请使用此插件