Ember 组件的动态模板参数

Question

我运行遇到了一种情况，其中有一个 glimmer 组件在其中呈现 LinkTo 组件。问题是 LinkTo 将 @model={{undefined}} 的情况和省略 @model 参数的情况视为两种不同的情况。这是因为它的默认值为 special value of UNDEFINED。发生这种情况时，组件使用 JS 进行转换，即 href 是 #，因此您不能使用 Open in new tab 等浏览器命令来打开结果 link。所以我尝试使用内联 ifs

    <LinkTo @route={{@route}}
    {{if @model (concat "@model={{" @model "}}")}}
    {{if @query (concat "@query={{" @query "}}")}}
    >
    {{yield}}
    </LinkTo>

然而，正如我所预料的那样，这是行不通的。我不得不求助于多个 if 块，如下所示：

    {{#if @model}}
      <LinkTo @route={{@route}} @model={{@model}} @query={{@query}} @replace={{@replace}}>
        {{yield}}
      </LinkTo>
    {{else if @models}}
      <LinkTo @route={{@route}} @models={{@models}} @query={{@query}} @replace={{@replace}}>
        {{yield}}
      </LinkTo>
    {{else}}
      <LinkTo @route={{@route}} @query={{@query}} @replace={{@replace}}>
        {{yield}}
      </LinkTo>
    {{/if}}

这可行，但相当冗长并且需要大量重复。有没有办法在指定给父组件的时候才动态传递@model？

Answer 1

我觉得你应该做的永远是依靠@models。

你可以这样做：

<LinkTo @route={{@route}} @models={{this.models}}>{{yield}}</LinkTo>

在 js 中：

get models() {
  if(this.args.model) {
    return [this.args.model];
  }
  if(this.args.models) {
    return this.args.models;
  }
  return [];
}

Ember 组件的动态模板参数

Dynamic template arguments for an Ember component

javascript

ember.js

glimmer.js