Где написать функцию обработчика Polymer

Question

Я только что начал работать на Полимере, и есть вещи, на которые я надеюсь получить разъяснения. Например, в этой документации: https://elements.polymer-project.org/elements/paper-header-panel. На последней карте о событиях есть сценарий, когда запускается прокрутка контента. Тем не менее, я понятия не имею, где поставить этот скрипт и почему используется двойная фигурная скобка {{}}. Если есть документация по этому поводу, было бы здорово! Благодарю.

Это те места, которые я пытался поставить этот скрипт:

<!-- Uncaught SyntaxError: Failed to execute 'registerElement' on 'Document': Registration failed for type 'undefined'. The type name is invalid. --> 
<script> 
(function() { 
    Polymer ({ 
     navigationbarScrollHandler: function(event) { 
      var scroller = event.detail.target; 
      console.log(scroller.scrollTop); 
     } 
    }); 
})(); 
</script> 

<!-- Uncaught SyntaxError: Failed to execute 'registerElement' on 'Document': Registration failed for type 'undefined'. The type name is invalid. --> 
<script> 
    Polymer ({ 
     navigationbarScrollHandler: function(event) { 
      var scroller = event.detail.target; 
      console.log(scroller.scrollTop); 
     } 
    }); 
</script> 

<!-- Uncaught NotSupportedError: Failed to execute 'registerElement' on 'Document': Registration failed for type 'paper-header-panel'. A type with that name is already registered. --> 
<script> 
    Polymer ({ 
     is: "paper-header-panel", 

     navigationbarScrollHandler: function(event) { 
      var scroller = event.detail.target; 
      console.log(scroller.scrollTop); 
     } 
    }); 
</script> 

<!-- Uncaught SyntaxError: Unexpected token (--> 
<script> 
     navigationbarScrollHandler: function(event) { 
      var scroller = event.detail.target; 
      console.log(scroller.scrollTop); 
     } 
</script> 

<!-- console doesn't log anything --> 
<script> 
    Polymer ({ 
     is: "custom-element", 

     navigationbarScrollHandler: function(event) { 
      var scroller = event.detail.target; 
      console.log(scroller.scrollTop); 
     } 
    }); 
</script> 

Answer 1

Вам также нужно добавить is и properties свойства вашей Polymer() функции, а также как id вашему <dom-module>, который соответствует значению вашего Polymer()is Недвижимость. Что-то вроде следующего.

Код:

<dom-module id="my-example-element"> 
    <style> 
    ... 
    </style> 
    <template> 
    ... 
    </template> 
</dom-module> 
<script> 
(function() { 
    Polymer ({ 
     is: 'my-example-element', 
     properties: { 
     // See and follow examples 
     }, 
     navigationbarScrollHandler: function(event) { 
      var scroller = event.detail.target; 
      console.log(scroller.scrollTop); 
     } 
    }); 
})(); 
</script> 

Ответы:

1. Двойные фигурные скобки {{}} является синтаксис связывания данных полимера.

2. scrollHandler вы спрашиваете о идет внутри Polymer() функции в вашем <script> разделе в самом низу пользовательского элемента, но за пределами <dom-module>. Here is an example (реальный мир) структуры, которой должен следовать ваш код. (. Или смотрите выше код для выдуманный теоретический пример)

Предложения:

Лучший учебник вы можете получить на все это, чтобы скачать Polymer Seed Element. Затем просмотрите все и прочитайте все комментарии (которые служат в качестве фактической документации). Он поможет вам быстро и быстро выполнить необходимый вам контекст. У этого есть все пример кода и пояснительная документация, в которой Вы нуждаетесь, чтобы иметь смысл вопроса, который Вы задали.

Вы также можете скачать Polymer Starter Kit. Если вы еще этого не сделали. Опять же, следуйте коду, и он ответит на большинство вопросов, которые вы задали, плюс другие, которых вы даже не знаете, чтобы спросить.