Попытка работать с кнопкой «Полимерная бумага-переключение»

Извините, если это глупый вопрос, но я пытаюсь выяснить, как использовать paper-toggle-button, чтобы элемент отображался/исчезал на моей странице.Попытка работать с кнопкой «Полимерная бумага-переключение»

Я могу заставить его работать, просто используя onclick, но это, очевидно, не правильно/идеально, и я не могу найти примеры его использования (для Интернета).

Кнопка переключения развертывается (без onclick='toggleShow'()) как:

<paper-toggle-button onchange={{toggleShow}} checked></paper-toggle-button>

сценарий, я пытался (и не с) составляет:

function toggleShow() { 
    if (checked: false) { 
    chart.hide('upload'); //this works with onclick 
    } else { 
    chart.show('upload'); 
    } 
}

Я уверен, что это бит тупой вопрос, но любая помощь, чтобы заставить меня двигаться в правильном направлении, была бы действительно оценена

источник

2014-12-27 Mike

'если (проверено: ложь) {' является синтаксическая ошибка (если только полимер не выполняет синтаксические преобразования) – FakeRainBrigand

var toggle = document.querySelector("paper-toggle-button"); 
toggle.addEventListener('change', function() { 
    if (this.checked) { 
    // do something if when checked 
    } else { 
    // do something if not checked 
    } 
});

приведенный выше код проверяет событие «изменения», которое запускается, когда переключатель переключается на взаимодействие пользователя и проверяет состояние кнопки.

Если вы собираетесь использовать это в пользовательском элементе, вы можете обернуть его в готовую функцию. вы бы дали toggle id (в этом случае я использовал toggle), поэтому вы можете выбрать его с помощью быстрого выбора полимеров.

ready: function() { 
    this.$.toggle.addEventListener('change', function() { 
    if (this.checked) { 
     // do something if when checked 
    } else { 
     // do something if not checked 
    } 
    }); 
}

редактировать: не заметило на первой проводке, что оп используется OnChange атрибута, так что вы можете игнорировать часть о слушателе событий и просто использовать указанную функцию как вывешено OP. просто нужно исправить логику.

второе редактирование: здесь находится плункер с примерами атрибутов on-change обоих методов, а также eventlistener. http://plnkr.co/edit/3tn3C2GpgKQY9bkzCt0L?p=preview

op используется при замене на месте изменения, которое могло быть корень проблемы для начала.

источник

2014-12-27 18:20:02

Это было замечательно (маленькая опечатка) на toggle.addEventListener (столица L), но в остальном это точно то, что я искал. Другой вопрос - querySelector просто захватывает первый элемент. Смогу ли я использовать querySelectorAll, чтобы получить всю кнопку переключения на странице? – Mike

сожалею о том, что L хуже, делая ошибку, похоже, я сделал это 2 раза. проклятье, что я человек. да, вы можете собирать группы элементов с помощью querySelectorAll. затем проанализируйте объект, как обычно. У меня были атрибуты установки проблемы с элементом element.attribute = значение, которое я должен был использовать element.setAttribute (атрибут, значение); –

Не стоит беспокоиться - ответ был велик, просто хотел удостовериться, что другие знали, если они наткнулись на него – Mike

Это один должен работать:

<paper-toggle-button on-change="toggleShow" checked></paper-toggle-button>

источник

2016-02-24 09:37:27 Ikbel

Я считаю обязательным свойством является более идиоматическим способом приблизиться к нему, что-то вроде этого:

<paper-toggle-button checked="{{showChart}}"></paper-toggle-button> 

<div id="chart" hidden$="[[!showChart]]">...</div>

источник

2016-08-01 15:27:11 Paul

Попытка работать с кнопкой «Полимерная бумага-переключение»

ответ

Смежные вопросы