Javascript 如何覆盖或更改子余烬组件中的数据

我有两个简单的余烬组件；列表组件和列表项组件。数据以数组的形式传递给列表，并在其中运行each循环，为数组中的每个项生成一个列表项组件

我希望在列表项组件中，从其父列表组件获取传递给它的数据并覆盖它。最终，我想做的不仅仅是覆盖它，并将其用作函数中的参数，以返回新的解析值

举个例子，假设这是一个tweet列表

这是我的密码

路由器.JS

import Ember from 'ember';
import config from './config/environment';

var Router = Ember.Router.extend({
  location: config.locationType
});

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

export default Router;

模板/TWEETS.HBS

{{tweet-list tweets=model}}

路由/TWEETS.JS

import Ember from 'ember';

export default Ember.Route.extend({
  model(){
    return[{
      tweetText: "this is an example  #request tweet text1 @user"
      },{
      tweetText: "tweet of the @text2 how #cool"
      }, {
      tweetText: "tweet toot took text3"
    }];
  }
});

组件/TWEET-LIST/COMPONENT.JS

import Ember from 'ember';

export default Ember.Component.extend({
});

import Ember from 'ember';

export default Ember.Component.extend({
// model(){
// return "over written value here"
// }
});

组件/TWEET-LIST/TEMPLATE.HBS

<ul>
  {{#each tweets as |tweet|}}
    <li>{{tweet-item tweet=tweet}}</li>
  {{/each}}
</ul>

{{tweet.tweetText}} - <!-- {{overwritten value here}} -->

组件/TWEET-ITEM/TEMPLATE.HBS

<ul>
  {{#each tweets as |tweet|}}
    <li>{{tweet-item tweet=tweet}}</li>
  {{/each}}
</ul>

{{tweet.tweetText}} - <!-- {{overwritten value here}} -->

---

我想我必须在COMPONENTS/TWEET-ITEM/COMPONENT.JS文件中进行覆盖吗？如何根据从父组件传递下来的数据进行覆盖，或者更好地返回一个新值

对给定和覆盖的tweet使用不同的组件属性。例如：

// components/tweet-item/component.js
import Ember from 'ember';
export default Ember.Component.extend({
   // given tweet
   tweet: null,

   // overwritten tweet
   parsedTweet: Ember.computed('tweet', function() {
     return {
         tweetText: this.get('tweet').tweetText + ' #overwritten'
     };
   }),

   // you may also modify given tweet here
   // but the better approach to send action up
   // in favor of data-down-action-up principe

   actions: {
     publish: function(tweet) {
       this.sendAction('publish', tweet);
     }
   }
});

// components/tweet-item/template.hbs
tweetText: {{parsedTweet.tweetText}}
<button {{action 'publish' tweet}}> Publish </button>

// components/tweet-list/component.js
actions: {
  publish: function(tweet) {
    // your logic
  }
}

// components/tweet-list/template.hbs
<ul>
  {{#each tweets as |tweet|}}
    <li>{{tweet-item tweet=tweet publish='publish'}}</li>
  {{/each}}
</ul>

---

您需要在父数组中覆盖项，还是只在项组件中显示覆盖的值？