Ember.js EmberJS-带有多个复选框的表-如何保存'；选中'；分页状态

这是我的组件的模板 可排序表格复选框.hbs

<table class="table table-checkbox" data-page-length="{{dataPageLength}}">
  <thead>
    <tr>
      <th>&nbsp;</th>
      {{#each-in columns as |prop value| }}
        <th
          class="{{if (or (eq (get sortingStatus prop) '')
                          (eq (get sortingStatus prop) 'asc')
                          (eq (get sortingStatus prop) 'desc')) 'sorting'}} w25p {{get sortingStatus prop}}"
          {{action 'toggleSorting' prop}}>
          {{#if value.title}}
            {{value.title}}
          {{else}}
            {{value}}
          {{/if}}
        </th>
      {{/each-in}}
    </tr>
  </thead>
  <tbody>
  {{#each data as |item|}}
    <tr>
      <td>
        <div class="">
          {{input
              type='checkbox'
              checked=item.checked
              change=(action 'chooseItem' item)}}

        </div>
      </td>
      {{#each-in columns as |prop value| }}
        <td>
          {{#collection- value=(get item prop) field=value.field as |col|}}
            {{#number-format isNumber=(eq value.type 'number') value=col as |val|}}
              {{#if value.linkable}}
                {{#link-to value.linkable.route (get item value.linkable.paramField)}}
                  {{value.prefix}}
                  {{val}}
                {{/link-to}}
              {{else}}
                {{value.prefix}}
                {{val}}
              {{/if}}
            {{/number-format}}
          {{/collection-}}
        </td>
      {{/each-in}}
    </tr>
  {{/each}}
  </tbody>
</table>

<p>Your Selected Items:</p>
<ul>
  {{#each selectedItems as |item|}}
    <li>{{item.title}}</li>
  {{else}}
    <em>No items selected</em>
  {{/each}}
</ul>

{{checked}}


{{yield}}

import Ember from 'ember';

/**
 * Table component
 *
 * Allows to render dynamic tables with sorting where items are displayed as
 * checkboxes
 *
 * Header titles of table should passed as ``columns`` arg to the component.
 *
 * columns: {
 *   title: {
 *     title: 'Game Title',
 *     sorting: 'title',
 *     linkable: {
 *       route: 'home.cabinet.developer.games.game',
 *       paramField: 'game_uid',
 *     },
 *   },
 *   genres: {
 *     title: 'Genre',
 *   },
 *   amount: {
 *     title: 'Ad Revenue Earned',
 *     prefix: '$',
 *     type: 'number',
 *     sorting: 'amount'
 *   },
 *   platforms_data: {
 *     title: 'Platform',
 *     collection: true,
 *     field: 'title',
 *   },
 *   ages_data: {
 *     title: 'Ages',
 *     collection: true,
 *     field: 'value',
 *   },
 * },
 *
 * Example of using of this component
 *
 * {{sortable-table data=model.games.results columns=columns sorting=sorting}}
 *
 * @class SortingTableComponent
 * @module components/sortable-table
 * @extends Ember.Component
 * @public
 */
export default Ember.Component.extend({

  /**
   * Sorting status
   *
   * @property sortingStatus
   * @type {Object}
   * @default null
   * @public
   */
  sortingStatus: null,

  /**
   * Avoid sharing state between components
   *
   * @method init
   * @return {undefined}
   * @public
   */
  init() {
    this._super(...arguments);
    this.set('sortingStatus', {});
    this.selectedItems = [];
    this.checked=false;
  },

  /**
   * Fill ``sortingStatus`` object with reset statuses
   *
   * @method willInsertElement
   * @return {undefined}
   * @public
   */
  willInsertElement() {
    const columns = this.get('columns');

    for (const element in columns) {
      if (columns[element].sorting) {
        this.set(`sortingStatus.${element}`, '');
      }
    }
  },

  actions: {

    /**
     * Toggle sorting
     *
     * @method toggleSorting
     * @param prop {String} name of property
     * @return {boolean} false if this property doesn't exist in ``sorting`` object
     * @public
     */
    toggleSorting(prop) {
      // If ``prop`` property doesn't exist in ``sorting`` object, return false
      if (!(prop in this.get('sortingStatus'))) {
        return false;
      }

      // Reset another properties sorting state
      for (const element in this.get('sortingStatus')) {
        if (element !== prop) {
          this.set(`sortingStatus.${element}`, '');
        }
      }

      // Set asc if starting state, desc if asc and starting state if desc
      if (this.get(`sortingStatus.${prop}`) === '') {
        this.set(`sortingStatus.${prop}`, 'asc');
      } else if (this.get(`sortingStatus.${prop}`) === 'asc') {
        this.set(`sortingStatus.${prop}`, 'desc');
      } else {
        this.set(`sortingStatus.${prop}`, '');
      }

      // Sending action
      this.sendAction('action', this.get(`columns.${prop}.sorting`), this.get(`sortingStatus.${prop}`));

      return true;
    },

    chooseItem(item, e) {
      const added = e.target.checked;
      this.set('checked', added);
      if (added) {
        item.checked=true;
        this.get('selectedItems').pushObject(item);
      }
      else {
        this.get('selectedItems').removeObject(item);
      }
    },
  },
});

因此，当我浏览页面时，应用程序会调用API来查询接下来要显示的5个项目，当我返回到页面#1时，我没有任何项目。检查状态-由于项目是来自API调用的新对象，因此它没有在中设置的.checked属性

如何解决这个问题？

---

可能有一种动态的方法来检查是否可以设置复选框的属性。

这些更改不会保存，因为您没有在后端使用正确的选中字段保存模型。我建议使用两种方法动态计算复选框的选中状态：

快的那个。您可以检查元素是否在数组中。或者您可以使用提供此类帮助程序的。然后您可以在可排序表复选框中编写类似的内容。hbs：

//table-row.hbs {{input type='checkbox' 已检查=已检查 更改=（操作'chooseItem'项）}

---

这些更改不会保存，因为您没有在后端使用正确的选中字段保存模型。我建议使用两种方法动态计算复选框的选中状态：

快的那个。您可以检查元素是否在数组中。或者您可以使用提供此类帮助程序的。然后您可以在可排序表复选框中编写类似的内容。hbs：

//table-row.hbs {{input type='checkbox' 已检查=已检查 更改=（操作'chooseItem'项）}

---

selectedItems.some（el=>el.get（'id'）==itemId）-此
部分
定义在哪里？。如果没有定义，则可以使用isAny方法
selectedItems.isAny（'id'，itemId）
@kumkanillam，
有些是。当然，您也可以使用Ember.Enumerable
isAny
。
selectedItems.some（el=>el.get（'id'）==itemId）-此
部分
定义在哪里？。如果没有定义，则可以使用isAny方法
selectedItems.isAny（'id'，itemId）
@kumkanillam，
有些是。当然，您也可以使用Ember.Enumerable
isAny
。
{{input type='checkbox' 
    checked=(array-contains selectedItems item.id property='id') 
    change=(action 'chooseItem' item)}}
//table-row.js
      // ...
      isChecked: Ember.computed('item.id', 'selectedItems.length', function() {
          const itemId = this.get('item.id');
          const selectedItems = this.get('selectedItems');
          return selectedItems.some(el => el.get('id') === itemId);
      })
      // ...
//table-row.hbs
    {{input type='checkbox'
            checked=isChecked
            change=(action 'chooseItem' item)}}