Question

一旦点击了这个子组件中的链接，我就试图从子组件更新父组件的属性。但这会导致意外的整页重新加载。

我正在撰写组件。从Parent-Component，我将可用属性和（clousure动作）提供给Child-Component。

当我对＆＃34;键＆＃34;进行硬编码时，一切似乎都正常工作。父组件的属性。但是当我从Child-Component修改它时，它会进行完全重新加载，将属性重置为默认值，因此不会过滤。

所有属性都是相互链接的，作为级联。

这是我的代码：

父-Component.js

import Ember from 'ember';
import moment from 'moment';

const { Component, computed, inject } = Ember;

export default Component.extend({

  calculateDates: inject.service(),

  key: 'week',
  dateOne: computed('key', function(){
    return this.get('calculateDates').getFirstDayOf(this.get('key'));
  }),
  dateTwo: computed('key', function(){
    return this.get('calculateDates').getLastDayOf(this.get('key'));
  }),
  filteredModel: computed('dateOne', 'dateTwo', function() {
    const modelToFilter = this.get('model');
    return modelToFilter.filter((item) => {
      const itemDate = item.get("date");
      return itemDate >= dateOne && itemDate <= dateTwo;
    });
  }),
  arrayForChildComponent: computed('dateOne', 'dateTwo', function() {
    const formatedDates = [
      moment(new Date()).format('YYYY-MM-DD'),
      moment(this.get('dateOne')).format('YYYY-MM-DD'),
      moment(this.get('dateTwo')).format('YYYY-MM-DD')
   ];
    const routeTitle = ['Today', 'Week', 'Month'];
    const routes = [];
    for (var i=0; i < formatedDates.length; i++) {
      let queryParams = formatedDates[i];
      if (routeTitle[i]=='Week') queryParams = `${formatedDates[i]}-to-${formatedDates[i + 1]}`;
      if (routeTitle[i]=='Month') queryParams = moment(new Date()).format('MMMM');
      routes.push(
        { route : 'authenticated.meetings.list',
          name : routeTitle[i],
          queryParams : queryParams });
    }
    return routes;
  }),
  actions: {
    setFilterKey(value) {
      this.set('key', value.toLowerCase());
    }
  }
});

父组件模板

{{yield (hash
    header=(
      component 'header-component'
    )
    groups=(
      component 'meetings-component'
      meetings=filteredModel
    )
    nav=(
      component 'Child-Component'
      arrayForChildComponent=arrayForChildComponent
      onListItemClick=(action 'setFilterKey')
    )
)}}

路线视图模板

{{#Parent-Component model=model as |filter| }}
  {{#filter.header}}
    {{filter.nav}}
  {{/filter.header}}
  {{filter.groups}}
{{/Parent-Component}}

子组件模板（filter.nav）

{{#each arrayForChildComponent as |route|}}
    <li class={{liClass}} onClick={{action onListItemClick route.name}}>
      {{#link-to route.route (query-params date=route.queryParams) class=aClass}}
        {{route.name}}
      {{/link-to}}
    </li>
{{/each}}

我想要完成的任务，是设置标签名称的关键。

我也尝试过（action（mut key）route.name），从Parent-Component导入密钥。
还尝试从Parent-Component导入操作并在Child-Component中使用它。
最后，它并不活着.Rooad。我禁用了它。

一切都具有相同的效果，他们从父组件更改密钥，更新过滤器，然后重新加载页面。

非常令人沮丧。

有什么想法吗？

先谢谢了。 :)

更新

我取消了事件处理程序onClick，依赖于嵌套链接的事件传播。现在它工作，属性被正确更新，但嵌套链接设置的queryParameters不会反映在URL中，直到第二次单击。无论是“活跃”还是“活跃”。类将出现，直到第二次单击。

{{#each arrayForChildComponent as |route|}}
    <li class={{liClass}} {{action onListItemClick route.name}}>
      {{#link-to route.route (query-params date=route.queryParams) class=aClass}}
        {{route.name}}
      {{/link-to}}
    </li>
{{/each}}

Ember：更新父组件属性会导致完全重新加载

更新

0 个答案: