Реагируйте на логические атрибуты в компонентах Ember Glimmer

В React есть хороший шаблон, в котором пустой атрибут компонента интерпретируется как истинное значение во время рендеринга.

Синтаксис HTML

Это также очень похоже на собственный синтаксис HTML, где определенные атрибуты обеспечивают логическую семантику, например:

<button type="submit" class="submit-button" disabled>Submit</button>

Атрибут disabled является логическим значением, функционально эквивалентным disabled="true" (кнопка выше отключена).

Реагировать на синтаксис

В React есть что-то подобное. Итак, если у вас есть компонент, определенный следующим образом:

import React, { Component } from 'react';
export default class Foo extends Component {
  render() {
    if (this.props.loggedIn) {
      return "Welcome back!";
    } else {
      return "Hello world!";
    }
  }
}

И вы, вероятно, уже знаете это, но затем вы можете вызвать компонент таким образом и получить вывод из ветки true этого условного выражения:

<Foo loggedIn /> // Welcome back!

Это хороший API для разработчика, который может использовать этот компонент в своем приложении.

Эмбер синтаксис?

Ember недавно представил вызов угловой скобки. Я не буду вдаваться в многочисленные почему и как нового синтаксиса и функций, но, возможно, наиболее очевидным изменением является новое визуальное сходство с React и нативной HTML-разметкой при использовании компонентов.

И поэтому с этим изменением я спросил себя: возможны ли логические атрибуты в синтаксисе угловых скобок Ember?

// angle-foo.hbs
{{#if @loggedIn}}
  Welcome back!
{{else}}
  Hello world
{{/if}}

И вызывается так:

<AngleFoo @loggedIn /> // Hello world :(

Это не сработает. @loggedIn оценивается как false, если вы передаете его в качестве аргумента без значения.

Пустые @arguments имеют значение

Но давайте посмотрим поближе. Используя помощник {{log}}, мы можем увидеть, действительно ли игнорируется @loggedIn или есть значение, с которым мы можем работать.

// angle-foo.hbs
{{log '@loggedIn:' @loggedIn}}
{{#if @loggedIn}}
  Welcome back!
{{else}}
  Hello world
{{/if}}
// templates/application.hbs
<AngleFoo />

Отсутствие передачи ключа @loggedIn приводит к значению undefined. Но что, если мы используем синтаксис логического атрибута? Какое значение мы получаем?

// templates/application.hbs
<AngleFoo @loggedIn />

Забавно, но если вы передадите пустую строку ('') в console.log Chrome, вы получите пробел:

Итак, если пустая строка выглядит как пустое место при регистрации, означает ли это, что значение пустого ключа в синтаксисе угловых скобок является пустой строкой?

Давайте разберемся. Нам понадобится всегда полезный ember-truth-helpers для реализации.

// angle-foo.hbs
{{log '@loggedIn:' @loggedIn}}
{{#if (eq @loggedIn '')}}
  Welcome back!
{{else}}
  Hello world
{{/if}}
// templates/application.hbs
<AngleFoo @loggedIn />

Вот оно! используя простое условное выражение, мы можем разблокировать новый удобный API для других разработчиков (и самих себя), которые используют наши компоненты.

Недостатком является то, что это может быть чем-то вроде WAT для других инженеров, которые привыкли к соглашениям Ember, но если вы правильно документируете (возможно, используя ember-cli-addon-docs), то вы обнаружите, что это простой способ добавить выразительности вашим компонентам Ember. .