将记录附加到 RecordArray 并动态更新组件模板

Question

这是呈现的组件的样子：

我期望的是，当我单击“添加对象”按钮时，它会创建一个新的 Rental 记录，并将该 Rental 记录附加到现有的 RecordArray .由于 RecordArray 被跟踪，组件模板重新呈现，因此新记录的 title 属性显示在模板中。

当我点击按钮时，returns Web Inspector 出现这个错误：

Uncaught TypeError: this.myrentals.pushObject is not a function at MyCompComponent.addRental

对于此问题中引用的应用程序的基本设置，我使用的是 Ember Guides Tutorial App。

这是我router.js

中指定的路线

// router.js
import EmberRouter from '@ember/routing/router';
import config from './config/environment';

export default class Router extends EmberRouter {
  location = config.locationType;
  rootURL = config.rootURL;
}

Router.map(function() {
  this.route('testing');
});

这是我的路线，returns rental 条中的 RecordArray 条记录：

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

export default class IndexRoute extends Route {

  @service store;

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

这是我的 rental 模型：

// rental.js
import Model, { attr } from '@ember-data/model';

export default class RentalModel extends Model {
  @attr title;
}

我的 testing 模板：

//templates/testing.hbs
<MyComp @rentals={{@model}} />

我的 MyComp 组件模板：

// components/my-comp.hbs
<h2>Practice Iterate over RecordArray and Add items</h2>

<ul>
  {{#each @rentals as |rental| }}
    <li>{{rental.title}}</li>
  {{/each}}
</ul>

<button type="button" {{on "click" this.addRental}}>Add an object</button>

最后，我的 MyComp 组件 class:

// components/my-comp.js
import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';
import { action } from '@ember/object';
import { A } from '@ember/array';

export default class MyCompComponent extends Component {
  @tracked myRentals = this.args;

  @action
  addRental() {
    this.myRentals.pushObject({
      title: "My new rental"
    });
  }
}

我确实参考了 Ember JS Looping Through Lists Guide。我显然在这里工作时遗漏了一个或多个概念。

提前致谢！

Answer 1

我想通了！

组件模板如下：

//components/my-comp.hbs
<h2>Practice Iterate over RecordArray and Add items</h2>

<ul>
  {{#each this.myRentals as |rental| }}
    <li>{{rental.title}}</li>
  {{/each}}
</ul>

<button type="button" {{on "click" this.addRental}}>Add an object</button>

这里是组件的 class:

// components/my-comp.js
import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';
import { action } from '@ember/object';
import { inject as service } from '@ember/service';

export default class MyCompComponent extends Component {
  @service store;
  @tracked myRentals = this.args.rentals;

  @action
  addRental() {
    this.myRentals.pushObject(this.store.createRecord('rental', {title: "test"}));
  }
}

我需要更正一些细节：

我必须注入 store 然后将其设置为属性。
为了获取作为参数传入 my-comp 模板的 rentals 变量，我需要通过 this.args.rentals.
为了追加到 Rental 记录的 RecordArray，我不得不用 this.store.createRecord.

rental

我希望这对其他人有帮助！

将记录附加到 RecordArray 并动态更新组件模板

Append record onto RecordArray and Dynamically update Component Template

javascript

ember.js