如何使用聚合物掌握细节？

时间：2014-07-04 00:18:50

标签： json polymer

正如标题所说，我怎样才能对聚合物做一个主要的细节，我想要实现的是这个。 enter image description here

我现在用聚合物管理的所有内容都是上面图片中的第一页，但是现在当我点击列出的类别时，我不知道如何获取信息。

这是我的代码： 主菜单有（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=json&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 = result;
        }
    });
</script>

我不知道接下来该做什么，如果我点击Feed元素中的a，我该如何检索这些产品。

以下是我正在使用的信息：Json Format Google Spreadsheet

如果你以更简单的方式知道如何做到这一点，我对学习感兴趣。

谢谢

2 个答案:

答案 0 :(得分：1)

有很多方法可以达到这个目的，但我认为直接问题的答案是这样的：

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

您还必须添加on-tap处理程序，例如：

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

答案 1 :(得分：1)

学习聚合物时我也解决了Master＆gt;细节＆gt;深入学习作为一个学习项目。我有几次尝试，直到我有代码我认为简单但结构很好：

如何获得所选细节也是我的绊脚石之一。应该帮助您解决问题的相关代码是：

<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>

相关问题
最新问题