Question

当我在组件对象中执行undefined并在ember检查器，控制台选项卡中显示错误消息时，我得到console.log(this.get('item.product.description'));：

Uncaught TypeError: Cannot read property 'length' of undefined

我怀疑这种情况正在发生，因为item.product.description来自一个承诺（async电话）。在页面加载时，承诺尚未实现。但是，我不想做的是在组件中创建一个.then块，如：

this.get('item.product').then((product) => {

这只会使组件不那么孤立，因为它希望item.product是一个承诺，而不是一个实际的字符串。

我应该考虑哪些其他方法？：

// Route
import Ember from 'ember';

export default Ember.Route.extend({
  model(params) {
    return this.store.find('user', params.user_id);
  }
});

// Template
{{#each item in model.jobOrders.lastObject.checkout.items}}
  {{product-card item=item}}
{{/each}}

组件：

// Component template
<p class="name">{{item.product.name}}</p>
<p class="description">{{truncatedDescription}}</p>

// Component object
import Ember from 'ember';

export default Ember.Component.extend({
  truncatedDescription: Ember.computed('item.product.description', function() {
    console.log(this.get('item.product.description'));

    var truncatedText = this._truncate(this.get('description'), 48);
    console.log(truncatedText);

    return truncatedText;
  }),

  actions: {
    // ...
  },

  // Private
  _truncate(text, limit) {
    if (text.length > limit){
      text = text.substr(0, limit - 3) + '...';
    }
    console.log(text);
    return text;
  }
});

Answer 1

一种可能性是将描述本身传递给组件而不是项目。

// Template
{{#each item in model.jobOrders.lastObject.checkout.items}}
    {{product-card description=item.product.description}}
{{/each}}

这样，当item.product.description结算时，它会更新组件中的计算属性truncatedDescription。

如何正确调用组件中的关联模型？

1 个答案: