Question

我已经参考了EmberJS官方指南，了解＆＃34; as＆＃34;的使用情况。车把模板中的关键字。但我发现它很混乱。

有人可以用简单的术语解释我（关于将值传递给组件，收益等）

任何例子都会非常感激。

Answer 1

如果组件产生某些值，可以使用as关键字来引用它。我可以提供以下示例。

组件的文件：

//yield-something.js
import Component from '@ember/component';

/**
 * This component just yields something
 *
 * @module
 * @augments Ember.Component
 */
export default Component.extend({
    /**
     * Something to yield
     */
    something: undefined
});

组件模板的文件：

{{yield something}}

用法：

{{#yield-something something=(hash name='Joe') as |data|}}
  Hello {{data.name}}
{{/yield-something}}

这个组件产生我传递给它的东西，然后我用它作为data（hash helper从传递的参数创建一个对象）。这个例子看起来很奇怪，但它很短，我希望它有所帮助。 yield和as的实际用法是将组件创建的一些对象或值传递给嵌套组件/模板。收益率不仅限于一个参数，您可以产生少量值{{yield 'Hello' 'World' 123}}，然后像这样使用它们：{{#component-name as |val1 val2 val3|}}

您可以查看ember-leaflet如何使用它将外层传递给嵌套。每个组件都不使用产量。事实上，如果你是初学者，你可能不需要使用yield，除非你需要构建一组复杂的组件（比如ember-leaflet）。

Answer 2

要在另一个模板中使用as关键字，我们想先在hash的原始组件中声明它。

例如，我们有一个名为foo-a的组件。（也从艰苦的教训中学到，ember不允许使用一个单词作为组件的名称。我们至少需要使用一个破折号，以避免与将来的html更改冲突。）

//`foo-a.js` 
export default Component.extend({
   init() {},
   method1() {
      return 'blah';
   }
});

//`foo-a.hbs`
{{yield}}

父组件bar-b.hbs看起来像

{{#foo-a}}
  <div> This is the content I want to display
   </div>
{{/foo}}

bar-b将呈现：这是我要显示的内容。

现在说，我们想在foo-a中使用bar-b，并且在将内容传递到method1时希望使用foo-a，我们需要进行以下更改foo-a.hbs才能实现：

{{yield (hash method1=method1)}}

现在bar-b.hbs看起来像

{{#foo-a as |fooArgs|}}
  <div> This is the content I want to display, but use a method from `foo-a`. 
    I want to call `method1` in `foo-a` component now. and this is the syntax: 
    {{fooArgs.method1}}
   </div>
{{/foo}}

现在我们可以看到bar-b呈现的以下文本：这是我要显示的内容，但是使用foo-a中的方法。我想立即在method1组件中调用foo-a。这是语法：等等

EmberJS作为车把模板中的关键字

2 个答案: