typescript - Aurelia repeat.for 分页绑定问题

我对 Aurelia 还很新，正在摸索它的绑定，现在遇到了一个有点奇怪的问题。

主要前提是，我正在开发一个更新信息的网页应用，该应用从 API 获取数据。这些数据被分成若干块（卡片），用户可以查看。应用中还有搜索/排序组件，供用户筛选这些卡片。这就是我遇到问题的地方...

当用户对数据进行搜索或排序时，卡片会被正确过滤和显示。然而，我也想添加一个分页组件，但由于某种原因，这个组件中的模型数据绑定没有完全更新。

这是代码（几乎包含了所有内容，以防需要）：

更新源.html

<!--Main view component for the update feed. Will house all cards generated from update-feed.ts-->
<template>

  <!--Custom loader-->
  <load-screen if.bind="router.isNavigating || loading"></load-screen>

  <!--Search component-->
  <search-feed></search-feed>

  <!--Loader while fetching results-->
  <h1 if.bind="!results" class="default-msg" textContent.bind="defaultMessage"></h1>

  <!--If tasks found bind the pager-->
  <div if.bind="!loading && results" id="feed-main" role="main" class="container-fluid clear-top">

    <!--Pass data to pager to handle pagination-->
    <pager>
      <!--<card-commit></card-commit> //pager.html-->
    </pager>

  </div>

</template>

更新源.ts

import BuildDash from '../../../../services/build-dash';
import {FeedData} from '../../../../services/feed-data';
import {bindable, inject} from 'aurelia-framework';

@inject(BuildDash, FeedData)
export class UpdateFeed {

  /**
   * Class will handle retrieving and displaying all card data
   */
  public buildDash;
  public loading: boolean;
  public results: boolean;
  public defaultMessage: string;
  public feedData: FeedData;

  // Prop for unit-test overriding of cardData with mockData
  public taskList: Array<any>;

  constructor(BuildDash, FeedData) {
    this.buildDash = BuildDash;
    this.feedData = FeedData;

    // Start loader
    this.loading = true;
    this.results = false;
    this.getDefaultMsg();
  }

  public activate() {

    /**
     * Using a setTimeout until a way to tap into the activate() method is solved.
     * This throws an error in unit tests 'Unhandled rejection Error: Not Found'
     * This error can be ignored since it calls a stubbed version of this in testing for the actual unit tests.
     */
    return setTimeout(() => this.getData(), 0);
  }

  public getDefaultMsg() {
    // Default message if there are no cards to display
    this.defaultMessage = this.loading ? 'Searching for tasks...' : 'You currently have no projects needing updated';
  }

  public getData() {

    // TODO: buildDash.build(portfolioId), portfolioId needs to be grabbed from current embedded portfolio page
    return this.buildDash.build(portfolioId).then(res => {

      // Primary data assignment
      return this.feedData.load(res.data);
    })
      .then(() => {
        console.log('Fetch complete');

        // Stop loader
        this.loading = false;

        // Cast FeedData to bool for results
        this.results = !!this.feedData.cardList;

        return this.getDefaultMsg();
      });

  }

}

搜索源.html

<template>

  <div class="container-fluid">
    <div class="search-bar">
      <form class="form-inline projector-forgive">

        <div class="refresh-btn">
          <button role="button" class="btn btn-primary form-inline projector-forgive" click.delegate="refreshFeed()">
            <span class="glyphicon glyphicon-refresh" aria-hidden="true"></span>
            Refresh Feed
          </button>
        </div>

        <div class="search-input">
          <select class="form-control" value.bind="selectedSort" change.delegate="sortDropDown()">
            <option repeat.for="option of sortOptions" model.bind="option.val">${option.text}</option>
          </select>

          <input class="form-control" type="search" placeholder="Search" value.bind="searchQuery" input.delegate="searchInput()"/>
        </div>

      </form>
    </div>
  </div>

</template>

search-feed.ts

import {bindable, inject} from 'aurelia-framework';
import {DashBoard} from '../../pages/pmdash/pmdash';
import {FeedData} from '../../services/feed-data';

@inject(DashBoard, FeedData)
export class SearchFeed {

  @bindable public searchQuery: string;
  @bindable public selectedSort: string;
  @bindable public sortOptions: Array<object>;
  public data: FeedData;
  public router: any;

  constructor(DashBoard, FeedData) {
    this.router = DashBoard.router;
    this.data = FeedData;

    this.sortOptions = [
      {'val': 'commLate',  'text': 'Commit Date Late'},
      {'val': 'commEarly', 'text': 'Commit Date Early'},
      {'val': 'taskAsc',   'text': 'Task Name (Ascending)'},
      {'val': 'taskDesc',  'text': 'Task Name (Descending)'},
      {'val': 'projAsc',   'text': 'Project Name (Ascending)'},
      {'val': 'projDesc',  'text': 'Project Name (Descending)'}
    ];

    this.searchQuery = sessionStorage.getItem('Query') ? sessionStorage.getItem('Query') : '';

    if (sessionStorage.getItem('Dropdown')) {
      this.selectedSort = sessionStorage.getItem('Dropdown');
    }

  }

  public refreshFeed() {
    // Full refresh of feed components
    this.router.navigateToRoute(
      this.router.currentInstruction.config.name,
      this.router.currentInstruction.params,
      { replace: true }
    );
  }

  public sortDropDown() {
    sessionStorage.setItem('Dropdown', this.selectedSort);
    return this.searchInput();
  }

  public searchInput() {
    // console.log(this.searchQuery);
    return this.data.getFeedData(this.searchQuery);
  }
}

feed-data.ts

import {observable, noView} from 'aurelia-framework';

@noView()
export class FeedData {

  /**
   * Class to represent all card data in the update-feed.
   * Used to filter and render search results without modifying original API data
   */
  public cardListMaster: Array<any>;
  public cardList: Array<any>;
  public loadFlag: boolean;
  @observable public temp: Array<any>;

  constructor () {
    console.log('FeedData constructor');
    this.cardList = [];
    this.loadFlag = true;
  }

  public tempChanged() {
    // console.log('tempChanged: length', this.temp);
  }

  public load(data) {
    /**
     * Method used to prepare data for views during API calls
     */
    this.cardListMaster = data;
    this.temp = this.cardListMaster.slice();
    let query = sessionStorage.getItem('Query');
    return this.getFeedData(query);
  }

  public getFeedData(query) {

    let sort = sessionStorage.getItem('Dropdown');

    switch (sort) {
      case 'commLate':
        return this.sortCommitLate(query);
      case 'commEarly':
        return this.sortCommitEarly(query);
      case 'taskAsc':
        return this.sortTaskAsc(query);
      case 'taskDesc':
        return this.sortTaskDesc(query);
      case 'projAsc':
        return this.sortProjAsc(query);
      case 'projDesc':
        return this.sortProjDesc(query);
      default:
        return this.sortCommitLate(query);
    }
  }

  public sortCommitLate(query) {
    return this.searchInput(query).sort((a, b) => b['DE:pln_to_commit_delta'] - a['DE:pln_to_commit_delta']);
  }

  public sortCommitEarly(query) {
    return this.searchInput(query).sort((a, b) => a['DE:pln_to_commit_delta'] - b['DE:pln_to_commit_delta']);
  }

  public sortTaskAsc(query) {
    return this.searchInput(query).sort((a, b) => {

      const taskNameA = a.name.toLowerCase();
      const taskNameB = b.name.toLowerCase();

      if (taskNameA < taskNameB) {
        return -1;
      }
      if (taskNameA > taskNameB) {
        return 1;
      }
      return 0;
    });
  }

  public sortTaskDesc(query) {
    return this.searchInput(query).sort((a, b) => {

      const taskNameA = a.name.toLowerCase();
      const taskNameB = b.name.toLowerCase();

      if (taskNameA < taskNameB) {
        return 1;
      }
      if (taskNameA > taskNameB) {
        return -1;
      }
      return 0;
    });
  }

  public sortProjAsc(query) {
    return this.searchInput(query).sort((a, b) => {

      const projNameA = a.project.name.toLowerCase();
      const projNameB = b.project.name.toLowerCase();

      if (projNameA < projNameB) {
        return -1;
      }
      if (projNameA > projNameB) {
        return 1;
      }
      return 0;
    });
  }

  public sortProjDesc(query) {
    return this.searchInput(query).sort((a, b) => {

      const projNameA = a.project.name.toLowerCase();
      const projNameB = b.project.name.toLowerCase();

      if (projNameA < projNameB) {
        return 1;
      }
      if (projNameA > projNameB) {
        return -1;
      }
      return 0;
    });
  }

  public searchInput(query) {
    query = !query ? '' : query.toLowerCase();

    this.temp = this.cardListMaster.slice();
    let masterCopy = this.cardListMaster.slice();

    if (sessionStorage.getItem('Query') === query && !this.loadFlag) {

      return this.cardList;

    } else {

      sessionStorage.setItem('Query', query);

      let filteredList = masterCopy.filter(card => {
        for (const key in card) {
          if (String(card[key]).toLowerCase().includes(query)) {
            // console.log(card);
            return card;
          }
        }
      });

      this.loadFlag = false;
      Array.prototype.splice.apply(this.temp, [0, this.temp.length].concat(filteredList));
      return Array.prototype.splice.apply(this.cardList, [0, this.cardList.length].concat(this.temp));
    }

  }

}

主要问题组件 pager.ts

import {inject, observable} from 'aurelia-framework';
import {FeedData} from '../../services/feed-data';

@inject(FeedData)
export class Pager {

  public feed: FeedData;
  public feedData: Array<any>;
  public feedLength: number;
  public pageList: number;
  public cardsPerPage;
  public currentPage;
  public load: boolean;

  constructor(FeedData) {
    this.feed = FeedData;
    // this.loadPager();

    console.log('loadPager called');

    this.feedData = this.feed.cardList;
    this.feedLength = FeedData.cardList.length;

    this.cardsPerPage = 20;
    this.currentPage = 1;
    this.pageList = Math.ceil(this.feedLength / this.cardsPerPage);
    // FIXME: pageList not updating!
    // I've tried referencing this property just about every way I know how to, but no matter what it does not update like 'feedData' does automatically in the view

    console.log(this.pageList);

  }
}

分页器.html

<template>

  <!--THIS WORKS-->
  <!-- feedData updates automatically with the model-->
  <template repeat.for="task of feedData">

    <!--Bind each tasks data to a card as we loop-->
    <card-commit

      task-id.bind="task.ID"
      task-name.bind="task.name"
      project-name.bind="task.project.name"
      assigned-to.bind="task.assignedTo.name"
      successors.bind="task.successors"
      commit-delta.bind="task['DE:pln_to_commit_delta']"
      commit-status.bind="task.commitStatus"
      planned-start-date.bind="task.plannedStartDate"
      planned-comp-date.bind="task.plannedCompletionDate"
      duration.bind="task.duration"
      actual-start.bind="task.actualStart"
      commit-date.bind="task.commitDate"
      condition.bind="task.condition"
      note.bind="task.lastNote"
      note-text.bind="task.lastNote.noteText"
      note-entry-date.bind="task.lastNote.entryDate"
      note-avatar-download-url.bind="task.lastNote.owner.avatarDownloadURL"
      note-owner-name.bind="task.lastNote.owner.name"

    ></card-commit>

  </template>

  <!--Pager Nav-->
  <nav aria-label="Page navigation">
    <ul class="pagination">

      <!--Previous Link-->
      <li class="page-item">
        <a class="page-link" href="#" aria-label="Previous">
          <span aria-hidden="true">&laquo;</span>
          <span class="sr-only">Previous</span>
        </a>
      </li>


      <!-- THIS DOES NOT WORK-->
      <!-- I have to manually refresh the page to get 'feedLength' to update-->
      <!--Pages-->
      <li repeat.for="page of feedLength" class="page-item">
        <a class="page-link" href="#">${page + 1}</a>
      </li>

      <!--Next Link-->
      <li class="page-item">
        <a class="page-link" href="#" aria-label="Next">
          <span aria-hidden="true">&raquo;</span>
          <span class="sr-only">Next</span>
        </a>
      </li>
    </ul>
  </nav>

</template>

所以再次说明，主要问题出在这个分页器组件上。我不明白为什么 feedData 会自动更新，而引用它的其他属性却没有更新。我该如何解决这个问题？

有点有趣的是，我可以在分页导航中做类似这样的操作，并且它会自动更新：

  <!--Pages-->
  <li repeat.for="page of feedData.length" class="page-item">
    <a class="page-link" href="#">${page + 1}</a>
  </li>

但这当然并没有真正给我我需要的东西，它所做的只是显示 feedData 在这个导航中仍然可以访问。此外，即使它能做到，我真的需要能够在视图模型中处理这一切，因为在将其显示在视图中之前仍然需要更多的处理。

答案＃1

这是预期的结果。当你这样做时：

this.feedLength = this.feed.cardList.length;

你正在把一个原始值赋给 feedLength，而不是一个可观察对象。

要解决你的问题，你必须使用计算属性：

@computedFrom('feed.cardList') //imported from aurelia-framework
get feedLength() {
  return this.feed.cardList.length
}

然后，你可以像使用普通属性一样在视图中使用它：

<li repeat.for="page of feedLength" class="page-item">
  <a class="page-link" href="#">${page + 1}</a>
</li>

无论如何，repeat.for="page of feedData.length" 是更好的方法。因此，只有在必要时才使用计算属性。

希望这能帮到你！

答案＃2

据我一眼所理解，你是否在尝试更新一个分页列表，该列表反映了你 this.feed.cardList 中的元素数量？

如果是这样，你可以像在上面的 pager.html 中对你的 card-commit 元素所做的那样，对分页进行相同的操作，并使用一个数组（feedData）结合 repeat.for 和 $index 来设置分页数字，如下所示：

<li repeat.for="page of feedData" class="page-item">
    <a class="page-link" href="#">${$index + 1}</a>
</li>

这应该为数组 feedData 中的每个元素创建一个列表元素，其中 page 是该元素（如果你需要使用数组中的数据来设置你的列表或链接元素，这非常有用），而 $index 是该 page 元素在 feedData 中的索引。上述代码应反映对 feedData 所做的任何更改，例如添加或删除元素。

我认为还有更多像 $index 这样的，比如 $first、$last，也可能有 $odd、$even 等等。另外，如果你想限制列表元素的数量，你也可以使用 repeat.for="page of feedData.slice(0, 3)" 或类似的方法。

供参考，我对 Aurelia（以及网页开发）也相对陌生，所以我不是专家。据我所知，有些东西如果不做额外处理是无法观察到的。我注意到这一点——在对象数组中更改对象的键值不会在 repeat.for 中反映出来。这里可能是类似的问题。