使用来自API调用的数据更新聚合物元素属性 [英] Updating a polymer element property with data from API call

问题描述

我正在尝试使用来自ajax api调用的数据更新聚合物元素中的属性。我在应用程序的其他地方也有类似的功能，用户可以动态地添加包。

I'm trying to update a property in a polymer element with data from an ajax api call. I have something similar working elsewhere in the app where users are able to add packages dynamically.

任何人都知道我在这里做错什么？

Anyone know what I'm doing wrong here?

<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="address-input.html"> 
<link rel="import" href="package-list.html">
<link rel="import" href="../bower_components/iron-ajax/iron-ajax.html">

<dom-module id="step-one">
<style>
</style>
<template>
    <section id="addresses">
        <div class="container">
            <div class="row">
                <h5>Addresses</h5>
                <address-input></address-input>
            </div>
        </div>
    </section>
    <section id="packages">
        <div class="container">
            <div class="row">
                <h5>Packages</h5>
                <package-list></package-list>
            </div>
        </div>
    </section>


    <section id="submit-shipping-info">
        <div class="container">
            <div class="row">
                <a class="waves-effect waves-light btn col s12 m12 l12" id="submit" on-click="submitInfo">Submit</a>
                <template is="dom-repeat" items="{{options}}">
                    <p>{{item.rates}}</p>
                </template>
            </div>
        </div>
    </section>


</template>
</dom-module>
<script>
Polymer ({
    is: 'step-one',
    properties: {
        options: {
            type: Object,
            notify: true,
            value: []   
        }   
    },
    submitInfo: function(e) {
        e.preventDefault();

        //add dimensions of all packages to the dimensions array
        var dimensions=[];
        $('#packages .package-card').each(function(){
            var weight= $(this).find('.weight').val();
            var length= $(this).find('.length').val();
            var height= $(this).find('.height').val();
            var width= $(this).find('.width').val();
            var dimension={width:width,length:length,height:height,weight:weight};
            dimensions.push(dimension);
        });

        //capture address data
        var from = $('#fromAddress').val();
        var to = $('#toAddress').val();

        //URL that processes getting a URL
        var getQuoteURL = '../v2/API/get_rates.php';
        var stuff = [];

        jQuery.ajax({
            type: "POST",
            dataType: "json",
            cache: false,
            url: getQuoteURL,
            data:{
                from:from,
                to:to,
                dimension:dimensions
            }
        }).done(function(data){
            $.each(data['rates'], function(i, rate ) {
                stuff.push({carrier:rate.carrier});
                return stuff;
            });

            //show step two when ajax call completes
            $('.step-two').removeClass('hide').addClass('show');
            console.log(stuff);//I can see all objects I need to pass to the 'options' property
            return stuff;
        });
        this.push('options',stuff);//doesn't seem to update the 'options' property with these as a value
    }
});
</script>

我可以使用console.log我想尝试使用的数组，但是当我尝试将其推送到选项属性，它不会更新。

I'm able to console.log the array i'm trying to use, but when I try to push it to the 'options' property, it won't update.

推荐答案

考虑使用Polymer内置方法而不是jQuery 。

Consider using Polymer built in methods instead of jQuery.

1。一个提交请求的按钮。

<paper-button on-click="handleClick">Send a package</paper-button>

---

2。 AJAX请求使用 < iron-ajax> 元素

<iron-ajax id="SendPkg"
  url="my/api/url"
  method="POST"
  headers='{"Content-Type": "application/json"}'
  body={{packageDetails}}
  on-response="handleResponse">
</iron-ajax>

---

3。处理点击事件

点击，选择 < iron-ajax> ，并调用< iron-ajax> 的 generateRequest（）

数据绑定或聚合物的DOM API ，以获取包的宽度，高度等...

Use either data binding or Polymer's DOM API to get the package's width, height ...etc

handleClick: function() {
  this.packageDetails = {"width": this.pkgWidth, "height": this.pkgHeight };
  this.$.SendPkg.generateRequest();
},

---

4 。处理响应

handleResponse: function() {
  //Push data to options...
},

这篇关于使用来自API调用的数据更新聚合物元素属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！