Как я могу изменить логическое свойство в Lit-Element, чтобы скрыть содержимое моего компонента? - PullRequest
Новая
       107

Как я могу изменить логическое свойство в Lit-Element, чтобы скрыть содержимое моего компонента?

1 голос
/ 14 марта 2020

У меня есть пользовательский компонент, который должен скрывать содержимое, когда я устанавливаю логическое свойство в false. Любое другое свойство отражается, кроме этого. Должно быть, я что-то делаю не так. 

static get properties(){
      title: {
        type: String,
        attribute: 'title',
      },

      titleEnable: {
        type: Boolean,
        attribute: 'title-enable',
      },
}

constructor() {
    super();
    this.titleEnable=true;
    this.title="default";
}

render(){

    return html`                
        ${this.titleEnable 
        ? html`
        <p class="title" ?hidden="${!this.titleEnable}">${this.title}</p>
        `
        : html ``} 
    ` 
}

Если я использую этот компонент, например <my-component></my-component> в файле HTML, он показывает: по умолчанию, как и ожидалось.

Если я использую его таким образом : <my-component title="New Title"></my-component> отображается: Новый заголовок, как и ожидалось.

НО, если я попытаюсь скрыть его <my-component title-enable="false"></my-component>, логическое значение просто не изменится. Я пробовал! Title-enable, title-enable = 'false ", .titleEnable = false и все варианты, которые вы можете себе представить. Меня больше всего бесит то, что всякий раз, когда я устанавливаю в конструкторе this.titleEnable = false и Я просто объявляю переменную БЕЗ значения в теге, и она принимает значение ИСТИНА, появляется «по умолчанию». <my-component title-enable></my-component> Я полностью потерян.

1 Ответ

1 голос
/ 14 марта 2020

Хорошо, это сложно. Вам нужно обрабатывать его по-разному, передавая некоторый объект, как показано ниже: 

  static get properties() {
    return {
      titleConfig: {
        type: Object,
        attribute: 'title-config'
      }
    }
  }

  render() {
    return html`                
      ${this.titleConfig.titleEnable
        ? html`
      <p class="title" ?hidden="${!this.titleConfig.titleEnable}">${this.titleConfig.title}</p>
      `
        : html``} 
  `
  }

В HTML: 

<my-component title-config='{"title":"shan", "titleEnable": false}'></my-component>

Теперь возникает вопрос, почему это так? true каждый раз?

Ответ: Чтобы логическое свойство можно было настраивать из разметки, оно должно по умолчанию иметь значение false. Если значение по умолчанию равно true, вы не можете установить его в значение false из разметки, поскольку наличие атрибута со значением или без него равно значению true. Это стандартное поведение для атрибутов в веб-платформе.

Оно взято из Polymer Do c.

Итак, создавая атрибут title-enable, HTML считает этот атрибут true

Это действительно облом для того, кто начинает работать над Polymer или LitElement.

...