привязка lit-элемента к свойствам объекта, которые могут быть нулевыми, или его подвойства могут быть нулевыми

Question

У меня есть этот сценарий все время: список объектов (скажем, Клиент) и форма для редактирования выбранного объекта. Я связываю поля формы со свойствами текущей выбранной сущности следующим образом:

<some-element value="${this.selectedCustomer.name}"></some-element>

Это работает, пока у меня есть selectedCustomer, что не всегда так. Когда у меня его нет, форма должна быть пустой. Я подумал, что троичный оператор можно использовать так:

<some-element value="${this.selectedCustomer ? this.selectedCustomer.name : ''}"></some-element>

Но тогда проблема продолжается со свойством name, которое может быть нулевым (выглядит искусственно для сущностей Customer, но для меня это очень важно при обнуляемые свойства!). Я могу исправить это снова с помощью троичного оператора:

<some-element value="${this.selectedCustomer ? (this.selectedCustomer.name ? this.selectedCustomer.name : '') : ''}"></some-element>

И это нужно было сделать для всех полей формы для всех сущностей. Я просто хочу спросить любой опыт, это лучший способ сделать это?

Answer 1

Поскольку выражения с * - 1010 * равны JavaScript, вы должны выполнять обработку ошибок так же, как и в любой другой простой JavaScript. В этом случае вам нужно принять меры против undefined, и ничего не горит - html ничего не может с этим поделать, потому что он никогда не видит выражения, только полученное значение.

Как указано в комментариях, JavaScript сам обратился к этому сейчас с помощью дополнительных операторов объединения и объединения nulli sh:

Ваш последний пример теперь может выглядеть следующим образом:

html`<some-element value=${this.selectedCustomer?.name ?? ''}></some-element>`

Это поддерживается в Chrome, Firefox, Edge, Babel, TypeScript и скоро должен появиться в Safari.