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

Question

我参考了 EmberJS 官方指南来了解 "as" 关键字在 handlebars 模板中的用法。但是我觉得很混乱。

这与将值传递给组件、产量等有什么关系？

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 帮助程序根据传递的参数创建一个对象）。这个例子可能看起来很奇怪，但它很短，我希望它能有所帮助。 yield 和 as 的实际用法是将组件创建的一些对象或值传递给嵌套的 components/template。 yield 不仅限于一个参数，您可以 yield 几个值 {{yield 'Hello' 'World' 123}} 然后像这样使用它们：{{#component-name as |val1 val2 val3|}}

你可以看看ember-leaflet如何使用它来传递外层到嵌套。收益率并非在每个组件中都使用。事实上，如果你是 ember 的新手，你可能不需要使用 yield，除非你需要构建复杂的组件集（比如 ember-leaflet）。

Answer 2

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

例如，我们有一个名为 foo-a 的组件。（也从惨痛的教训中学到 ember 不允许一个词作为组件的名称。我们至少需要 1 个破折号以避免与将来的 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 将呈现：这是我要展示的内容

现在说我们想在bar-b中使用foo-a，我们想在将内容传递到[时使用method1 =17=]，我们需要进行以下更改 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中的方法。我现在想在 foo-a 组件中调用 method1。这是语法：blah

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

EmberJS as keyword in handlebars template

javascript

jquery

ember.js

ember-cli