使用Ember组件'的方法

Using Ember component's methods inside template

本文关键字：方法 Ember 组件 使用      更新时间：2023-09-26

我刚刚开始学习Ember，有一件事我很困惑，如果我能访问模板中组件的方法。

例如，我有一个note-list组件，它将note-line的列表呈现如下：

<ul class="list">
  {{#each notes as |note|}}
    {{note-line note=note index=@index selected=(isSelected note)}}
  {{/each}}
</ul>

note-list组件定义为：

Ember.Component.extend({
    tagName: '',
    isSelected(note) {
        return note.id === this.get('selectedNote').id
    }
})

但是我得到了错误Assertion Failed: A helper named 'isSelected' could not be found。

我想我可以用助手来解决这个问题，但为特定组件的行为创建一个单独的助手似乎不是一个好的解决方案。

请帮忙给我一些更好的处理方法。

非常感谢。

在您的情况下，您的组件可以自行决定是否选择它。实际上，您有一个函数isSelected，无论注释行是否被选中，它都会返回一个布尔值。

您必须考虑使用计算属性来实现这一点。

note-line组件的定义如下：

Ember.Component.extend({
    tagName: '',
    note: null,
    isSelected: Ember.computed('note', function() {
        return this.get('note.id') === this.get('selectedNote.id')
    })
})

然后，在组件模板中，isSelected作为一个简单的组件变量可用，并在更新note时进行更新。

最后，您可以简单地使用这样的组件：

<ul class="list">
  {{#each notes as |note|}}
     {{note-line note=note index=@index}}
  {{/each}}
</ul>

但在这种情况下，正如您在评论中指出的，您需要将selectedNote传递给每个组件，以便它们更新isSelected属性。

这样做的一种方法是在模型本身中有一个isSelected属性，如本文所述。在route中的model函数中，您只需要像这样设置此属性：

model: function() {
    return this.store.find('notes')
     .then(function(notes) {
          notes.forEach(function(note) {
            note.set('isSelected') = true || false; // here will be implemented your function to determine if note is selected or not 
          });
          return notes;
        })
    })
}

然后，在组件模板中，isSelected在note中可用，与任何其他属性一样。

相关文章：