Nano Hash - криптовалюты, майнинг, программирование

Событие щелчка не срабатывает в полимерной бумаге-значок-кнопке

У меня определена следующая страница

<!DOCTYPE html>
<html>
<head>
    <title>Practice List</title>
    <link rel="import" href="elements/elements.html" />
    <link rel="stylesheet" type="text/css" href="Styles/styles.css" />
    <!-- google fonts definitions -->
    <link href='http://fonts.googleapis.com/css?family=Roboto:400,700' rel='stylesheet' type='text/css'>
    <script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
</head>
<body unresolved class="fullbleed layout vertical">
    <dom-module id="app">
        <template>
            <paper-drawer-panel>
                <paper-header-panel main mode="waterfall-tall">
                    <paper-toolbar id="mainToolbar">
                        <paper-icon-button id="paperToggle" icon="menu" paper-drawer-toggle></paper-icon-button>
                        <span class="flex"></span>
                        <paper-icon-button icon="search" on-tap="srchandler"></paper-icon-button>
                        <input type="text" id="searchText" style="width:200px; background:#3180ed;line-height:20px;border:solid 1px #4d90eb; border-radius:6px; padding:3px;color:#fff;" />
                        <div class="middle paper-font-display2 app-name ident">Practice List</div>
                    </paper-toolbar>
                </paper-header-panel>
            </paper-drawer-panel>
        </template>
        <script>
            Polymer({
                is: "app",
                ready: function () {
                    alert('Ready!!!!');
                },
                srchandler: function () {
                    alert('Search clicked');
                }
            });
        </script>
    </dom-module>
</body>
</html>

Для полноты вот файл elements.html

<!-- Iron -->
<link rel="import" href="../bower_components/iron-icons/iron-icons.html">

<!-- Paper Elements -->
<link rel="import" href="../bower_components/paper-drawer-panel/paper-drawer-panel.html">
<link rel="import" href="../bower-components/paper-header-panel/paper-header-panel.html">
<link rel="import" href="../bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="../bower_components/paper-input/paper-input.html">
<link rel="import" href="../bower_components/paper-styles/paper-styles.html">
<link rel="import" href="../bower_components/paper-toolbar/paper-toolbar.html">

Я перехожу на Polymer 1.0 и только что создал страницу выше. Оповещение «вызванный обработчик сценария» отображается, но обратный вызов ready не срабатывает, и когда я нажимаю кнопку поиска, функция searchhandler не вызывается.

Может ли кто-нибудь дать мне представление, где я ошибаюсь?

javascript polymer
17.06.2015

Ответы:


1

См. здесь руководство по миграции. Если ваше событие не запускается, см. здесь

Фигурные скобки ({{}}) не используются для декларативных обработчиков событий в шаблоне.

Ваш код должен быть:

<paper-icon-button icon="search" on-tap="srchandler"></paper-icon-button>

Регистрация вашего элемента также должна измениться. См. здесь

<body unresolved class="fullbleed layout vertical">
    <dom-module id="my-app">
        <template>
        <!-- your template here -->
            <paper-drawer-panel>
                <paper-header-panel main mode="waterfall-tall">
                    <paper-toolbar id="mainToolbar">
                        <paper-icon-button id="paperToggle" icon="menu" paper-drawer-toggle></paper-icon-button>
                        <span class="flex"></span>
                        <paper-icon-button icon="search" on-tap="srchandler"></paper-icon-button>
                        <input type="text" id="searchText" style="width:0px;visibility:hidden;" />
                        <div class="middle paper-font-display2 app-name ident">Practice List</div>
                    </paper-toolbar>
                </paper-header-panel>
            </paper-drawer-panel>
        </template>
        <script>
            Polymer({
                is: "my-app",
                ready: function () {
                    alert('Ready!!!!');
                },
                srchandler: function () {
                    alert('Search clicked');
                }
            });
        </script>
    </dom-module>

    <my-app></my-app>
</body>
17.06.2015
  • Спасибо, попробовал, но событие все равно не срабатывает. Имейте в виду, даже если я сделаю код '‹paper-icon-button icon=search on-tap=alert('Hi there');›‹/paper-icon-button›' Предупреждение также не появится. 17.06.2015
  • Смотрите другие изменения, которые я только что внес в ответ. Вам нужно изменить регистрацию элемента. 17.06.2015
  • Я изменил код в своем исходном вопросе, чтобы он соответствовал изменениям, которые вы предлагаете - теперь вместо того, чтобы получать панель заголовка и ящика, ничего не отображается :( - извините, возможно, что-то отсутствует в файле элементов, но не могу понять, что. 17.06.2015
  • См. этот jsbin. Имя app недопустимо и должно содержать дефис (-). Вам также необходимо убедиться, что вы действительно используете свой элемент, т.е. <my-app></my-app>. (Обратите внимание, что этот jsbin не будет работать и здесь только для того, чтобы показать вам макет кода) 17.06.2015
  • Кроме того, в вашей проверке elements.html вы правильно импортируете paper-header-panel, поскольку я вижу тире, а не подчеркивание в имени папки bower_components. 17.06.2015
  • Спасибо Все готово - по крайней мере, в Chrome - теперь нужно заставить его работать в IE :( но я оставлю это на потом - просто нужно, чтобы прототип работал 17.06.2015
    • Новые материалы
    Кластеризация: более глубокий взгляд
    Кластеризация — это метод обучения без учителя, в котором мы пытаемся найти группы в наборе данных на основе некоторых известных или неизвестных свойств, которые могут существовать. Независимо от..
    Как написать эффективное резюме
    Предложения по дизайну и макету, чтобы представить себя профессионально Вам не позвонили на собеседование после того, как вы несколько раз подали заявку на работу своей мечты? У вас может..
    Частный метод Python: улучшение инкапсуляции и безопасности
    Введение Python — универсальный и мощный язык программирования, известный своей простотой и удобством использования. Одной из ключевых особенностей, отличающих Python от других языков, является..
    Как я автоматизирую тестирование с помощью Jest
    Шутка для победы, когда дело касается автоматизации тестирования Одной очень важной частью разработки программного обеспечения является автоматизация тестирования, поскольку она создает..
    Работа с векторными символическими архитектурами, часть 4 (искусственный интеллект)
    Hyperseed: неконтролируемое обучение с векторными символическими архитектурами (arXiv) Автор: Евгений Осипов , Сачин Кахавала , Диланта Хапутантри , Тимал Кемпития , Дасвин Де Сильва ,..
    Понимание расстояния Вассерштейна: мощная метрика в машинном обучении
    В обширной области машинного обучения часто возникает необходимость сравнивать и измерять различия между распределениями вероятностей. Традиционные метрики расстояния, такие как евклидово..
    Обеспечение масштабируемости LLM: облачный анализ с помощью AWS Fargate и Copilot
    В динамичной области искусственного интеллекта все большее распространение получают модели больших языков (LLM). Они жизненно важны для различных приложений, таких как интеллектуальные..