Question

我是JS和Polymer的新手。无法弄清楚为什么这不起作用，我根据那里的几个主题重写了一百万次。

这个想法是有一个非常简单的下拉列表，它的选择数据绑定到AJAX请求的响应。

根据日志记录，AJAX完美返回，但数据没有绑定。

有人可以帮忙吗？

AJAX响应：

var text = '{ "employees" : [' +
            '{ "firstName":"John" , "lastName":"Doe" },' +
            '{ "firstName":"Anna" , "lastName":"Smith" },' +
            '{ "firstName":"Peter" , "lastName":"Jones" } ]}';

脚本和导入（可能比应该更多，我正在尝试使用组件）

<script src="../../static/bower/webcomponentsjs/webcomponents.js"></script>
<script src="../../static/npm/jquery/dist/jquery.js"></script>
<script src="../../static/npm/webanimations/web-animations.min.js"></script>    

<link rel="import" href="../../static/bower/font-roboto/roboto.html">
<link rel="import" href="../../static/bower/core-header-panel/core-header-panel.html">
<link rel="import" href="../../static/bower/core-toolbar/core-toolbar.html">
<link rel="import" href="../../static/bower/paper-tabs/paper-tabs.html">
<link rel="import" href="../../static/bower/paper-dropdown-menu/paper-dropdown-menu.html">
<link rel="import" href="../../static/bower/core-ajax/core-ajax.html">
<link rel="import" href="../../static/bower/polymer/polymer.html">
<link rel="import" href="../../static/bower/core-list/core-list.html">
<link rel="import" href="../../static/bower/core-collapse/core-collapse.html" >
<link rel="import" href="../../static/bower/core-menu/core-menu.html">
<link rel="import" href="../../static/bower/paper-dropdown/paper-dropdown.html">
<link rel="import" href="../../static/bower/paper-item/paper-item.html">

HTML

<body>

<polymer-element name="custom-selector" attributes="host data">
    <template>
        <template if="{{data.length == 0}}">
            <core-ajax auto 
                url="dosql" 
                on-core-response="{{updateData}}" 
                on-core-error="{{onError}}"
                response="{{yourData}}"
            </core-ajax>
        </template>
        <paper-dropdown-menu label="Dropdown with Data" on-core-select="{{selectData}}">
            <paper-dropdown class="dropdown">
            <core-menu class="menu">
                <template repeat="{{data in yourData}}">
                        <paper-item name="{{data.firstName}}">{{data.firstName}}</paper-item>
                </template>
            </core-menu>
            </paper-dropdown>
        </paper-dropdown-menu>
    </template>

    <script>
        Polymer('custom-selector', {
            ready: function () { console.log('firing ready');
                this.host = this.host || 'example.com'; 
                this.data = this.data || []; 
            },
            onError: function (e, resp) { console.log('onError');
                console.log('error!: ' + resp.response);
            },
            updateData: function (e, resp) { console.log('firing updateData');
                console.log('AJAX response:');
                console.log(JSON.parse(resp.response));
                this.data = JSON.parse(resp.response);

                console.log('this.data is now:');
                console.log(this.data);
            }
        });
    </script>
</polymer-element>



<custom-selector></custom-selector>

</body>

Answer 1

new Thread(new Runnable() {
    @Override public void run() {
        for (int i=1; i<=1000000; i++) {
            final int counter = i;
            Platform.runLater(new Runnable() {
                @Override public void run() {
                    recentList.getItems().add(Integer.toString(counter));
                }
            });
        }
    }}).start();

<template repeat="{{data in yourData}}">不是数组，而是一个对象。你想要达到的目的是：

yourData

我冒昧地改进了你的元素。我希望你能从中吸取教训，如果你需要进一步解释，请随时提出。

<template repeat="{{data in yourData.employees}}">

聚合物下拉数据绑定与AJAX响应

1 个答案: