聚合物,自动装订不起作用

时间:2015-05-26 08:27:35

标签: html5 polymer

我有一个Polymer的问题..这个组件是一个列表框的详细信息。单击该行时,ajax调用获取数据并调用details.setItems(data)函数。 console.log在函数调用的每个地方显示this.item,数据在变量中,一切都很好,只是GUI没有刷新。也许绑定不起作用?我该怎么办?

<polymer-element name="cegnyilvantarto-details" extends="base-details">
    <template>
        <page-structure dialog="{{dialog}}" flex style="height:100%">
            <div left-top>
                <table>
                    <td>
                        <tr>
                            <td>
                                <core-label for="#id">Azonosító:</core-label>
                            </td>
                            <td>
                                <paper-input id="id" disabled="true" value="{{item[0].id}}" style="text-align:center"></paper-input>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <core-label for="#name">Rendszám:</core-label>
                            </td>
                            <td>
                                <paper-input id="name" value="{{$.item[0].name}}"></paper-input>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <core-label for="#address">Gyártó:</core-label>
                            </td>
                            <td>
                                <paper-input id="address" value="{{$.item[0].address}}"></paper-input>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <core-label for="#phone">Telefonszám:</core-label>
                            </td>
                            <td>
                                <paper-input type="phone" id="phone" value="{{item[0].phone}}"></paper-input>
                            </td>
                        </tr>
                        <tr style="padding-bottom:30px;">
                            <td>
                                <core-label for="#contactname">Kapcsolattartó:</core-label>
                            </td>
                            <td>
                                <paper-input id="contactname" value="{{item[0].contactname}}"></paper-input>
                            </td>
                        </tr>
                        <tr style="padding-bottom:30px;">
                            <td>
                                <core-label for="#contactphone1">Telefonszám 1:</core-label>
                            </td>
                            <td>
                                <paper-input id="contactphone1" value="{{item[0].contactphone1}}"></paper-input>
                            </td>
                        </tr>
                        <tr style="padding-bottom:30px;">
                            <td>
                                <core-label for="#contactphone2">Telefonszám 2:</core-label>
                            </td>
                            <td>
                                <paper-input id="contactphone2" value="{{item[0].contactphone2}}"></paper-input>
                            </td>
                        </tr>
                        <tr style="padding-bottom:30px;">

                            <td>
                                <core-label>Cégcsoport:</core-label>
                            </td>
                            <td>
                                <me-combobox id="cgroupsCombobox" width="250"></me-combobox>
                            </td>
                            <td>
                            </td>
                            <td>
                            </td>
                        </tr>

                    </td>
                </table>
            </div>
            <div left-bottom flex style="height:100%">
                <div layout vertical flex style="min-height:140px;">
                    <core-label style="margin-top:10px;" for=" #comment ">Megjegyzés</core-label>
                    <paper-shadow z=1 flex style="width:100%; padding:10px; margin-top:10px; ">
                        <paper-autogrow-textarea flex style="width:100%; ">
                            <textarea id="comment " flex style="width:100%; " value="{{item[0].comment}} "></textarea>
                        </paper-autogrow-textarea>
                    </paper-shadow>

                </div>
            </div>
            <div right-top>
                <core-field>

                </core-field>
            </div>
            <div right-bottom>
                {{item | json}}
            </div>
            <div bottom-bar>
                <paper-button style="margin-left:15px;margin-bottom:15px;margin-top:5px; " self-start>Save</paper-button>
            </div>
        </page-structure>

        <core-ajax id="ajaxCGroupsCombobox" method="POST" handleAs="json" on-core-response="{{onCGroupsResponse}}"></core-ajax>

    </template>
    <script>
        Polymer('cgroups-details', {


            init: function () {
                this.getCGroupsCombobox();
                 },
            ready: function () {
                this.super();

            },
            setItems(item) {
                this.$.item = item;
                this.init();
                console.log("IDEJUTOTT");


            },
            getCGroupsCombobox: function () {
                var ajax = this.$.ajaxCGroupsCombobox;

                ajax.body = this.getComboboxBody();
                ajax.url = this.getServerAddress('get', 'cgroups');

                ajax.go();

            },

            onCGroupsResponse: function (event, response) {

                var res = response.response.res;
                var vehicles = [];
                //console.log(res);
                for (var i = 0; i < res.length; i++) {
                    var vehicle = {};
                    vehicle.text = res[i].name;
                    vehicle.id = res[i].id;
                    vehicle.name = res[i].name;
                    vehicle.comment = res[i].comment;
                    vehicles.push(vehicle);
                    // console.log(vehicle);
                }
                console.log(vehicles);
                this.$.cgroupsCombobox.setItems(vehicles);
            },


        });
    </script>
</polymer-element>

1 个答案:

答案 0 :(得分:0)

在聚合物绑定中,使用点表示法访问数组索引。

<paper-input id="id" disabled="true" value="{{item.0.id}}" style="text-align:center"></paper-input>