无法从本地json绑定数据以查看聚合物2

时间:2017-12-28 11:31:27

标签: javascript data-binding polymer iron-ajax

我正在使用Polymer 2并希望绑定本地json文件中的数据。但每次我尝试它时都无法获取json文件。

我尝试过两种方法:

1)使用

<iron-ajax url="data/employees.json" handle-as="json" last-response="{{items}}" auto>
</iron-ajax>

文件夹结构:

folder Structure

<iron-list items="{{items}}" as="item">
    <template>
        <div class="item">
            <b>[[item.nickname]]</b>
            <p>[[item.phone]]</p>
        </div>
    </template>
</iron-list> 

我还输入了铁阿贾克斯和铁列表

2)使用$.get在start中从json中提取数据并将其放入变量中以将其绑定到视图。

<script>
    class IronListClass extends Polymer.Element {
        static get is() {return 'iron-comp'}

        ready() {
            super.ready();
            var that = this;
            // $.get('data/employees.json', function(data) {
            //     that.employees = $.parseJSON(data).results;
            //     console.log(that.employees);
            // });
            $.get('data/employees.json', function(data) {
            this.employees = $.parseJSON(data).results;
            console.log(this.employees);
            }.bind(this));
        }        
    }
    window.customElements.define(IronListClass.is, IronListClass);
</script>

尝试了=这也是。

1 个答案:

答案 0 :(得分:0)

您可以加载json文件,如下所示,因为它已在我的应用程序中工作。

   <iron-ajax 
            auto 
            url$="{{url}}" 
            handle-as="json" 
            last-response="{{loadedItems}}"
           >
    </iron-ajax>

...

     static get properties() { return { 
        url :{
            type:String,
            value() {return "./data/employees.json"; }
        }

...

    static get observers() { return ['checkJsonFileLoaded(loadedItems)']}

    checkJsonFileLoaded(j) {
       if (j) {
           this.set('items', j);
           console.log(items); //u should see the loaded json file. If so than the problem is iron-list (to publish the result)
       }
    }