Блог

Я столкнулся с ситуацией с компонентом glimmer, который отображает LinkTo компонент внутри. Проблема в том, что LinkTo случай where @model={{undefined}} и случай пропуска @model аргумента рассматриваются как 2 разных случая. Это потому, что значением по умолчанию для него является специальное значение UNDEFINED . Когда это происходит, компонент использует JS для перехода, т.Е. href # , и поэтому вы не можете использовать команды браузера, такие как Открыть в новой вкладке, чтобы открыть результирующую ссылку. Итак, я попытался использовать встроенные if s

     <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 только тогда, когда он указан для родительского компонента?

Я думаю, что вам всегда следует полагаться на @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 [];
}