How to overwrite or alter data in child ember component

Question

I have two simple ember components; a list component and a list-item component. Data gets passed as an array to the list where it runs an each loop and makes a list-item component for each item in the array.

I'd like to, within the list-item component, take the data being passed to it from its parent list component and overwrite it. Eventually I would like to do more than just overwrite it and use it as a parameter in a function to return a new, parsed, value.

For the sake of example, lets say that this is a list of tweets.

Here is my code.

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

I believe I have to do the overwriting in the COMPONENTS/TWEET-ITEM/COMPONENT.JS file ? How do I go about overwriting or, even better, returning a new value based off of the data passed down from the parent component?

Do you need the item to be overwritten in the parent array or just display overwritten value inside item component? — Artur Smirnov

artych artych · Accepted Answer · 2015-09-29T13:55:42

Use different component properties for given and overwritten tweets. For example:

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

How to overwrite or alter data in child ember component

1 Answers