Question

我刚刚开始学习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。

我想我可以用帮助器解决它，但似乎不是为特定组件的行为创建单独的帮助器的好方法。

请帮助告诉我一些更好的方法来处理它。

非常感谢。

Answer 1

在您的情况下，您的组件可以自行确定是否已选中。实际上，你有一个函数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属性，如文档here所示。在model内的route功能中，您只需将此属性设置为：

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可用于任何其他属性。

在模板中使用Ember组件的方法

1 个答案: