Изменение данных по полимеру не отражает

Question

Я пытаюсь скрыть / показать элемент пользовательского интерфейса с кнопкой в ​​Polymer, но он не работает.У меня есть кнопка и элемент:

<button id="runPredictionButton">
    <i>Button text</i>
</button>
<px-card 
hidden$="{{hide}}">    
//...content here
</px-card>
<div class="output"></div>          

И я также определил свойство и прослушиватель событий:

  <script>
    Polymer({
      is: 'custom-view',
      properties: {
        hide: {
          type: Boolean,
          value: false 
        },
      },
    ready: function() {
      var self = this;
      this.$.runPredictionButton.addEventListener('click', function() {
        if (some_conditon == true) {
          filerootdiv.querySelector('.output').innerHTML = 'Is true';          
          this.hide = true
          console.log("This hide should be true:" + this.hide);
        } 
        else {
          filerootdiv.querySelector('.output').innerHTML = 'Is false';          
          this.hide = false
          console.log("This hide should be false:" + this.hide);
        }
      });
    }
  });      
  </script>

Я уверен, что some_conditon работает, потому что содержимоеэлемента .output не изменяется, однако элемент px-card вообще не скрывается / не скрывается.Кроме того, на консоли я вижу, что this.hide был изменен на требуемое значение, но элемент остается скрытым, несмотря ни на что.Есть ли что-то, что мне нужно сделать / автоматически принудительно обновить содержимое?Почему это не работает?Как я могу убедиться, что скрыл элемент px-card, изменив переменную hide?

Answer 1

хороший вопрос.Итак, прежде всего я хотел бы подчеркнуть, что текущий JS-код этого компонента Polymer на самом деле не «очень Polymer», поэтому вы взаимодействуете с DOM очень «jQuery», а не используете все преимущества библиотеки Polymer.

Как бы я предложил переписать этот код:

<button on-tap="hidePxCard">
    <i>Button text</i>
</button>
<px-card
hidden$="[[hide]]">
<!-- ...content here -->
</px-card>
<div class="output"></div>

Итак, здесь мы добавили 1) обработчик событий при нажатии hidePxCard 2) переключился с двусторонней ставки наодносторонний для [[hide]] через квадратные скобки, поэтому нет смысла использовать двухстороннее связывание.

Затем давайте настроим часть js:

<script>
    Polymer({
        is: 'custom-view',
        properties: {
            hide: {
                type: Boolean,
                value: false
            }
        },
        hidePxCard: function() {
            this.set('hide', !this.hide);
        }
    });
</script>

Не могли бы вы увидеть,как чистый код выглядит сейчас?Мы просто устанавливаем одно свойство на каждый hidePxCard вызов.Наша цель состоит в том, чтобы нам нужно было манипулировать свойствами Polymer, которые связываются с html-атрибутами, а не манипулировать DOM напрямую.Итак, ваш элемент теперь управляется данными.

Кроме того, я предполагаю, что имеется некоторый код CSS, который скрывает что-то, когда в элементе присутствует атрибут [hidden].

Этоможет быть сделано внутри элемента px-card с помощью:

<style>
    :host{
        display: block;
    }
    :host[hidden]{
        display: none;
    }
</style>

или настроено где-то как глобальный стиль для всего приложения (страницы).

Answer 2

Может быть, правило CSS не позволяет ему быть скрытым?

Убедитесь, что объект, который вы хотите скрыть, стилизован так, чтобы браузер знал, что делать, когда hidden верно (т.е. браузер долженустановите display в none).Например:

<style>
  :host{
    display: block;
  }
  :host[hidden]{
    display: none;
  }
</style>

Чтобы узнать, действительно ли это является причиной вашей проблемы, вы можете проверить эту информацию:

getComputedStyle(elementToHide).getPropertyValue("display"); 

Этот пример кода показывает приведенное выше в действии.

Рекомендации по веб-компонентам содержит дополнительную информацию об использовании селектора :host.