iron-media-query не работает - Polymer 1.0

Я новичок в Полимере (1.0).

Мой элемент <iron-media-query> не работает. Ошибок в консоли нет, но ничего не показывает.

Некоторые улучшения были бы потрясающими! Я пытаюсь запустить его с 2 часов. :)

заранее спасибо

Рон

<!-- Works correctly -->
<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../iron-media-query/iron-media-query.html">

<dom-module id="custom-element">

  <style>
    // Styles here
  </style>

  <template>

    <iron-media-query query="{{query}}" queryMatches="{{smallScreen}}"></iron-media-query>

    <template if="{{smallScreen}}">
      <strong>Small Screen</strong>
    </template>

    <template if="{{!smallScreen}}">
      <strong>Big Screen</strong>
    </template>

  </template>

</dom-module>

<script>

  Polymer({

    is: 'custom-element',

    properties: {
      query: {
        type: String,
        notify: true
      }
    }

  });

</script>

<custom-element query="(max-width:400px)"></custom-element>

polymer polymer-1.0
person Community    schedule 07.06.2015    source источник

Ответы (2)


arrow_upward
3
arrow_downward

Вы должны изменить queryMatches="{{}}" на query-matches="{{}}".

person Neil John Ramal    schedule 07.06.2015
comment
Я также должен добавить is="dom-if" в тег шаблона. Спасибо :) - person ; 07.06.2015

arrow_upward
2
arrow_downward

Поскольку вы также спрашивали об оптимизации:

Поскольку у вас нет большой разницы в данных между SmallScreen и нет, поэтому:

<strong>[[screenType]] Screen</strong>

<script>
    Polymer({
        is: 'custom-element',
        properties: {
            query: {
                type: String,
                notify: true
            },
            screenType: {type: String, computed: '_computeScreenType(smallScreen)'}
        },
        _computeScreenType: (t)=>{return t?"Small":"Big"}
    });
</script>

person AP.    schedule 09.12.2015
comment
Это тривиально, но дает вам удобочитаемое свойство и позволяет избежать dom-if. - person AP.; 09.12.2015