Ember 组件的动态模板参数

Question

我遇到了一个使用 glimmer 组件的情况，该组件在其中呈现 LinkTo 组件。问题是LinkTo 将@model={{undefined}} 的情况和省略@model 参数的情况视为两种不同的情况。这是因为它的默认值为special value of UNDEFINED。发生这种情况时，组件使用 JS 进行转换，即 href 是 #，因此您不能使用 在新选项卡中打开 之类的浏览器命令来打开生成的链接。所以我尝试使用内联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 [];
}