Инструмент смены полимерного каркаса с использованием привязки данных

Я использую Polymer на своем веб-сайте, точнее Основной каркас.

Вот пример кода, который я сделал:

<core-scaffold>
  <core-header-panel navigation flex mode="seamed">
    <core-toolbar>Application</core-toolbar>
    <core-menu theme="core-light-theme">
      <core-item icon="settings" label="item1"></core-item>
      <core-item icon="settings" label="item2"></core-item>
    </core-menu>
  </core-header-panel>
  <div tool>Title</div>
  <div>Content goes here...</div>
</core-scaffold>
<script>
  var menuItems = document.querySelector("core-menu");

  menuItems.addEventListener("core-select", function(){
    console.log(menuItems.selected);
  });
</script>

Я хочу, чтобы при нажатии одного из core-item из core-menu содержимое <div tool>Title</div> изменялось соответственно. Я уже смог подключить прослушиватель событий к выбору кнопок, но я не совсем знаю, как поддерживать инструмент в актуальном состоянии. Polymer имеет двустороннюю привязку данных, которую я не полностью освоил. все же.

Итак, что было бы наиболее рекомендуемым способом обновления tool-div с нажатой меткой пункта меню?


javascript data-binding polymer
person jdepypere    schedule 18.07.2014    source источник

Ответы (1)


arrow_upward
3
arrow_downward

Вы можете легко сделать это с помощью двусторонней привязки данных. <core-menu> предоставляет атрибут selectedItem, который вы можете привязать на. Чтобы получить привязку данных, вы можете настроить связанный шаблон вручную, но вы, вероятно, просто хотите сделать само приложение компонентом. Вот так:

<my-app></my-app>

<polymer-element name='my-app'>
  <template>
    <core-scaffold>
      <core-header-panel navigation flex mode="seamed">
        <core-toolbar>Application</core-toolbar>
        <core-menu theme="core-light-theme" selectedItem='{{item}}'>
          <core-item icon="settings" label="item1"></core-item>
          <core-item icon="settings" label="item2"></core-item>
        </core-menu>
      </core-header-panel>
      <div tool>{{item.label}}</div>
      <div>Content goes here...</div>
    </core-scaffold>
  </template>
  <script>
    Polymer('my-app', {
    });
  </script>
</polymer-element>
person Peter Burns    schedule 18.07.2014
comment
Есть ли способ сделать это без необходимости создавать отдельный элемент 'my-app'? - person jdepypere; 19.07.2014
comment
Да, есть несколько способов, самый простой — использовать шаблоны автоматической привязки: stackoverflow.com/questions/24824576/ . Тем не менее, я бы посоветовал вам написать свои собственные элементы, так как это дает вам удобное место для объявления фильтров функций и вычисляемых свойств, поддерживает инкапсулированное состояние и позволяет использовать компоненты вашего сайта новыми способами многократного использования! - person Peter Burns; 19.07.2014
comment
Проблема в том, что это моя главная страница, core-scaffold является основным элементом, содержащим все мои данные, поэтому для этого мне потребуется написать большую часть (если не весь) моего кода внутри шаблона core-scaffold... Я попробовал ваш пример, и он работает, но тогда я не могу найти способ привязать прослушиватели событий к core-menu. - person jdepypere; 19.07.2014
comment
Polymer может (обрабатывать события привязки за вас)[polymer-project.org/docs/polymer/, или вы можете поместить код внутри (domReady)[polymer-project.org/docs/polymer/polymer.html#lifecyclemethods] и используя ($.id)[polymer-project.org/docs/polymer/. Если у вас есть более конкретный вопрос, просто спросите, я просматриваю практически каждый вопрос с тегом Polymer на сайте :) - person Peter Burns; 19.07.2014
comment
Боюсь, я до сих пор не понимаю, как заставить его работать, не превращая его в полимерный элемент. Я пытался использовать автопривязку, но я, должно быть, делаю что-то не так. - person jdepypere; 19.07.2014
comment
Я только что создал отдельный полимерный элемент, как вы предложили в первый раз, было не так сложно реализовать, и теперь остальная часть моего кода также имеет лучшую структуру. Так что нет необходимости в новом jsbin, спасибо! - person jdepypere; 21.07.2014