如何覆盖或更改子 ember 组件中的数据

Question

我有两个简单的 ember 组件；一个列表组件和一个列表项组件。数据作为数组传递给列表，在其中运行每个循环并为数组中的每个项目创建一个列表项组件。

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

为了举例，假设这是一个推文列表。

这是我的代码。

ROUTER.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;

TEMPLATES/TWEETS.HBS

{{tweet-list tweets=model}}

ROUTES/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"
    }];
  }
});

COMPONENTS/TWEET-LIST/COMPONENT.JS

import Ember from 'ember';

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

COMPONENTS/TWEET-LIST/TEMPLATE.HBS

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

COMPONENTS/TWEET-ITEM/COMPONENT.JS

import Ember from 'ember';

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

COMPONENTS/TWEET-ITEM/TEMPLATE.HBS

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

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

Answer 1

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

// 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>

如何覆盖或更改子 ember 组件中的数据

How to overwrite or alter data in child ember component

javascript

components

ember.js