Question

我有两个简单的余烬组件;列表组件和列表项组件。数据作为数组传递到列表，在列表中运行每个循环，并为数组中的每个项创建一个列表项组件。

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

为了举例，我们可以说这是推文列表。

这是我的代码。

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;

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

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文件中进行覆盖？如何根据从父组件传递的数据覆盖或更好地返回新值？

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组件中的数据

1 个答案: