lundi 28 septembre 2015

How to overwrite or alter data in child ember component

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?




Aucun commentaire:

Enregistrer un commentaire