Дело в том, что вы вызываете button
текстовый узел внутри paper-button
и устанавливаете прослушиватель событий на этом узле, который - будучи узлом Text
- не запускает события ( кроме некоторых исключений ).
Кроме того, вы передаете this.go()
как обратный вызов addEventListener
. Это означает, что this.go()
выполняется , а затем возвращаемое значение передается как обратный вызов (в данном случае undefined
, потому что после console.log вы ничего не возвращаете). Вместо этого вы должны передать идентификатор функции, не вызывая ее:
addEventListener('tap', this.go);
Все вместе:
appendNodeToDom() {
let prop = this.result[i]['someProperty'];
let button = document.createElement('paper-button');
let text = document.createTextNode(prop);
button.appendChild(text);
button.addEventListener('tap', this.go); // Add the listener to button
this.shadowRoot.getElementById('buttons').appendChild(node);
}
go() {
console.log('go');
}
Просто небольшая заметка: имейте в виду, что у Polymer много инструментов, чтобы избежать выполнения прямых манипуляций с DOM. Если вам просто нужно добавить кнопку в список, вы можете рассмотреть решение, в котором dom-repeat
отображает кнопки, а изменения вносятся в базовое свойство массива.
Решение Михала можно улучшить, включив любые ссылки и т. Д. В тег заполнителя содержимого PlaceHolderAdditionalPageHead на странице макета. Таким образом, он будет правильно включен в заголовок сгенерированной страницы.
например
<asp:Content ContentPlaceholderID="PlaceHolderAdditionalPageHead" runat="server">
<link id="Link1" href="<% $SPUrl:~SiteCollection/Style Library/mystyle.css%>" runat="server" type="text/css" rel="stylesheet" />
<SharePoint:ScriptLink id="jQueryCore" language="javascript" name="ui.core.js" runat="server"/>
</asp:Content>
Вы можете встроить CSS, который хотите использовать в макете страницы, поместив тег в макет страницы. Например:
<style type="text/css">
.ms-pagetitle, .ms-titlearea
{
margin-bottom: 5px;
}
</style>
Или в макете страницы вы также можете создать относительную ссылку на файл CSS, который вы также хотите использовать:
<link rel="stylesheet" type="text/css" href="/_layouts/styles/mystyle.css"/>
Таким образом вы можете переопределить разные стили CSS в макетах страниц, которые вы использовать. Надеюсь, это поможет!