Опит за добавяне на полимерен елемент в друг полимерен елемент

Имам v-fire Polymer:

<script>
    Polymer({
        is: 'v-fire',

        properties : {
            onFire: {
                type : String,
                reflectToAttribute: true
            }
        },

        firing: function () {
            this.fire('fire');
        }
    })
</script>

Искам да мога да го използвам навсякъде в моите Polymer елементи, за да ги накарам да задействат вътрешна функция, която да ги накара да изпълнят конкретна задача като актуализация, така че да се актуализират, когато v-fire извиква firing.

Например правя нов обект за тестване:

<script>
    Polymer({
        is: 'fire-tester',

        _updateContent: function () {
            alert('I get updated');
        }
    });
</script>

в index.html

…
<link rel="import" href="/bg/components/fire-tester/fire-tester.html">
…
<body>
<fire-tester id="fire-tester"></fire-tester>
<script>
(function () {

    var ft = document.getElementById('fire-tester');

    // make a global v-fire Polymer
    var vfire = document.createElement('v-fire');
    // custom callback of the Polymer's that will include the v-fire
    vfire.onFire = '_updateContent';

    /**
     * And here, I try to insert the v-fire in the fire-tester Polymer
     */
    Polymer.dom(ft.root).insertBefore(
        vfire,
        Polymer.dom(ft.root).childNodes[0]
    );

    // the dom is pretty neat, fire-tester contains v-fire with the custom on-fire callback

    // then I try to fire the event
    vfire.firing(); // but nothing happen


});
</script>

Не работи, защото смятам, че v-fire не се обработва, когато се постави в fire-tester. Има ли начин да кажете на Polymer да обработи частта от dom, сякаш е декларирана в локалния DOM?


javascript polymer polymer-1.0
person vdegenne    schedule 05.06.2015    source източник

Отговори (1)


arrow_upward
1
arrow_downward

Изглежда, че подхождате неправилно към системата за събития. Това, което искате, е да стартирате метод на fire-tester, когато открие събитието fire на дъщерния v-fire елемент, нали? Ето как бих го събрал:

v-fire.html

<script>
  Polymer({
    is: 'v-fire',

    firing: function() {
      this.fire('fire');
    }
  });
</script>

fire-tester.html

<script>
    Polymer({
      is: 'fire-tester',

      listeners: {
        'fire': '_updateContent'
      },

      _updateContent: function () {
        alert('I get updated');
      }
    });
</script>

index.html

<fire-tester id="fire-tester"></fire-tester>
<script>
  (function(){
    var ft = document.getElementById('fire-tester');

    var vfire = document.createElement('v-fire');

    Polymer.dom(ft.root).insertBefore(
        vfire,
        Polymer.dom(ft.root).childNodes[0]
    );

    vfire.firing();
  })();
</script>
person Zikes    schedule 05.06.2015
comment
хубаво! обаче разбрах, че не мога да вмъкна v-fire в други Polymer елементи, вместо да го клонирам, което ме накара да завъртя всички клонирани v-fire, за да задействам персонализирано събитие в моето приложение. Мисля, че има друг и по-добър подход за управление на събития в приложението. Ще събера специфичните слушатели на приложението в основния елемент и ще изпълня съответните функции на Polymer като отговор. благодаря за подкрепата все пак, помогна ми да имам по-добър изглед arrrr! - person vdegenne; 05.06.2015
comment
Наистина мисля, че би било по-добре вместо това да използвате поведение, ако продължите да използвате повторно едни и същи събития на различни елементи. - person Neil John Ramal; 05.06.2015
comment
Без да виждате целия проект, е трудно да се каже, но може също така да е по-подходящо да включите v-fire в шаблона fire-tester на първо място или да го вмъкнете като съдържание. Разгледайте елемента <content> и как се използва в polymer- project.org/1.0/docs/devguide/local-dom.html - person Zikes; 05.06.2015