Блог

Как следует из названия, как я могу создать мастер-детализацию для polymer, я пытаюсь достичь вот чего.

Все, что мне удалось на данный момент с помощью polymer, — это первые страницы с приведенного выше изображения, но теперь я не знаю, как получить информацию, когда я нажимаю категорию из списка.

Вот мой код: Главное меню с (categoria, Producto, Marca)

 <polymer-element name="nested-animated-pages">
<template>
    <style>
        :host {
            display: block;
            position: relative;
        }
        core-animated-pages {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
        }
        .tall-toolbar {
            box-sizing: border-box;
            /*height: 240px;*/
        }
        .tall-toolbar.colored {
            fill: #fff;
            color: #fff;
        }
        .tall-toolbar[flex] {
            font-size: 1.5em;
        }
        core-icon-button {
            margin: 16px;
        }
        .body {
            background-color: #f1f1f1;
        }
    </style>
    <core-animated-pages id="pages" selected="{{page}}" selectedItem="{{selectedItem}}" transitions="hero-transition" no-transition?="{{noTransition}}">

        <section id="page1" cross-fade>
            <div class="tall-toolbar colored" style="background-color:blue;" layout vertical hero-id="thing" hero?="{{page === 0 || !noTransition}}">
                <div layout horizontal center>
                    <core-icon-button icon="arrow-back" on-tap="{{back}}"></core-icon-button>
                    <div flex>Categoria</div>
                    <core-icon-button icon="arrow-forward" on-tap="{{transition}}"></core-icon-button>
                </div>
                <div flex></div>
            </div>
            <div flex class="body">
                <feed-element markers="categoria"></feed-element>
            </div>
        </section>

        <section layout vertical id="page2" cross-fade>
            <div class="tall-toolbar colored" style="background-color:blue;" layout vertical hero-id="thing" hero?="{{page === 0 || !noTransition}}">
                <div layout horizontal center>
                    <core-icon-button icon="arrow-back" on-tap="{{back}}"></core-icon-button>
                    <div flex>Producto</div>
                    <core-icon-button icon="arrow-forward" on-tap="{{transition}}"></core-icon-button>
                </div>
                <div flex></div>
            </div>
            <div flex class="body">
                <feed-element markers="producto"></feed-element>
            </div>
        </section>

        <section layout vertical id="page2" cross-fade>
            <div class="tall-toolbar colored" style="background-color:blue;" layout vertical hero-id="thing" hero?="{{page === 0 || !noTransition}}">
                <div layout horizontal center>
                    <core-icon-button icon="arrow-back" on-tap="{{back}}"></core-icon-button>
                    <div flex>Marca</div>
                    <core-icon-button icon="arrow-forward" on-tap="{{transition}}"></core-icon-button>
                </div>
                <div flex></div>
            </div>
            <div flex class="body">
                <feed-element markers="marca"></feed-element>
            </div>
        </section>

    </core-animated-pages>
</template>
<script>
    Polymer({

        publish: {
            page: {
                value: 0
            }
        },

        selectedItem: null,
        noTransition: true,

        back: function () {
            this.noTransition = true;
            this.fire('nested-back');
        },

        transition: function () {
            this.noTransition = false;
            this.page = this.page === 0 ? 1 : 0;
        }

    });
</script>
  

И вот код, когда вы нажимаете на любой вариант

 <polymer-element name="feed-element">
<template>
    <polymer-jsonp auto url="https://spreadsheets.google.com/feeds/list/1NGAVRQEvuMPg2WZ999649ab_sOXTBpcM_ai3P1DFJgE/od6/public/values?alt=jsonamp;callback=" response="{{response}}"></polymer-jsonp>
    <template if="{{ markers == 'categoria'  }}">
        <template repeat="{{item in categoria}}">
            <paper-item label="{{item.cat}}"></paper-item>
        </template>
    </template>
    <template if="{{ markers == 'producto'  }}">
        <template repeat="{{item in categoria}}">
            <paper-item label="{{item.cat}}"></paper-item>
        </template>
    </template>
    <template if="{{ markers == 'marca'  }}">
        <template repeat="{{item in categoria}}">
            <paper-item label="{{item.cat}}"></paper-item>
        </template>
    </template>
</template>
<script>
    Polymer('feed-element', {
        ready: function () {
            this.categoria = [];
            this.productos = [];
            this.marca = [];
        },
        publish: {
            markers: "none"
        },

        responseChanged: function () {

            var lookup = {};
            var items = this.response.feed.entry;
            var result = [];

            for (var item, i = 0; item = items[i  ];) {

                switch (this.markers) {
                case "categoria":
                    var name = item.gsx$categoria.$t;
                    break;
                case "producto":
                    var name = item.gsx$producto.$t;
                    break;
                case "marca":
                    var name = item.gsx$marca.$t;
                    break;
                }

                if (!(name in lookup)) {
                    lookup[name] = 1;
                    result.push({
                        cat: name
                    });
                }
            }

            result.sort(function (a, b) {
                var nameA = a.cat.toLowerCase(),
                    nameB = b.cat.toLowerCase()
                if (nameA < nameB) //sort string ascending
                    return -1
                if (nameA > nameB)
                    return 1
                return 0 //default return value (no sorting)
            });
            this.categoria = resu<
        }
    });
</script>
  

Чего я не знаю, что делать дальше, так это если я нажму на элемент из feed, как я могу получить эти продукты.

Вот информация, с которой я работаю: Формат Json
таблица Google

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

Спасибо

Есть много способов добиться этого, но я думаю, что ответ на ваш прямой вопрос примерно такой:

 itemTap: function(e) {
  this.selectedCategory = e.target.templateInstance.model.item.cat;
}
  

Вам также нужно добавить on-tap обработчик, например:

 <paper-item label="{{item.cat}}" on-tap="{{itemTap}}"></paper-item>
  

При изучении Polymer я также использовал Master> Detail> детализация в качестве учебного проекта. У меня было несколько попыток, пока у меня не появился код, который я считал простым, но хорошо структурированным:

Получение выбранной детализации также было одним из моих камней преткновения. Соответствующий код, который должен помочь вам с вашим вопросом, является:

 <polymer-element name="rnc-masterdetail-list">
<template>
    <style>
        :host {
            display: block;
            width: 90%;
            /* set background to highlight the effect of this element */
            background: #e7e9fd;
            padding: 20px;
        }

       ... some style stuff omitted 

        .core-selected {
            /* highlight selected person */
            background: #455a64;
            color: white;
        }
    </style>
    <h2>List of persons</h2>

    <!-- The data selected is held on the selectedModel - see below for access examples 
         where data selected is passed as attribute into <rnc-masterdetail-detail> element 
         and accessed in scripts as this.selectedPerson.surname etc -->
    <core-selector
            on-core-activate={{getPersonActivated}}
            on-core-select={{getPersonSelected}}
            selectedModel="{{selectedPerson}}"
            id="personSelector">
        <template repeat="{{persons}}">
            <p>{{personnumber}} {{forename}} {{surname}}</p>
        </template>
    </core-selector>

    <!-- This element returns the list data - it has no visible UI -->
    <rnc-getlistdata persons="{{persons}}"></rnc-getlistdata>
    <!-- This element shows the detail for the selected person - hidden to start - 
         displayed in on-core-activate.
         The attribute personnumberselected is set so that the element can look up all the 
         details using that key -->
    <rnc-masterdetail-detail personnumberselected="{{selectedPerson.personnumber}}"></rnc-masterdetail-detail>

</template>

<script>
    Polymer('rnc-masterdetail-list', {
        ready: function () {

        },

        getPersonActivated: function (e, detail, sender) {
            /* Fired when an item element is selected */  
            console.log("rnc-testlist element list item selected");
        }

    });

</script>