如何设置聚合物属性属性值并将属性值传递到另一个聚合物组件属性

时间:2018-03-03 16:58:58

标签: ajax polymer

我有下面的代码,我用来调用带有聚合物的铁ajax的http请求,所以使用聚合物属性传递body和last-response的值。我们可以看到这里我们有requestBody聚合物属性我们是在requestBody中返回no值所有值都是硬编码的,如开始和结束以及标记下的名称。

        <px-vis-timeseries
                width="1000" 
                height="250"
                margin='{"top":30,"bottom":60,"left":65,"right":65}' 
                register-config='{"type":"vertical","width":200}'
                selection-type="xy" 
                chart-data="{{ltuchartData}}" 
                series-config="[[LTUseriesConfig]]"
                chart-extents='{"x":["dynamic",1619712],"y":[0,100]}' 
                event-data='[{"id":"333","time":15697128,"label":"test"}]' 
                x-axis-config='{"title":"Time"}' 
                y-axis-config='{"axis1":
                {"title":"Remaining","titleTruncation":false,"unit":"%"}}'>
              </px-vis-timeseries>


         <iron-ajax
              id="Request"
              method="POST"
              content-type="application/json"
              auto
              url="/api/series/v1/points"
              last-response="{{Data123}}"
              body="{{requestBody}}">
            </iron-ajax>

         Polymer({
              is: 'test-view',

              behaviors: [GlobalsBehaviour],

              properties: {

          uri: {
                  type: String,
                  observer: '_uriChanged'
                },

         requestBody:{
                  type: Object,
                  value: function() {
                    return {
                      "start": 11111,
                       "end": 123333,
                      "tags": [
                        {
                        "name" : "/asset/India/rotor",
                        }
                      ]
                    };
                  }
                }, 

         Data123:{
                    type: Object,
                    observer: '_formateData'
                },

          observers: [
              '_uriChanged(globals.uri)'
            ],


        _uriChanged: function(uri) {
          this.set('requestBody.tags.0.name', uri);
          this.$.Request.generateRequest();
        }

现在,下面是关于上述代码的查询。

  1. 我想根据我尝试的uri动态设置结束属性值(在requestBody属性值中定义):this.set(&#39; requestBody.end&#39;,&# 34; 1113444&#34);在_uriChanged,但它没有用。

  2. 我想在上面的px-vis-timeseries聚合物组件的属性中动态传递这个结束属性值

    图表-程度=&#39; {&#34; X&#34;:[&#34;动态&#34;,1619712],&#34; Y&#34;:[0100]}&#39 ; 事件数据=&#39; [{&#34; ID&#34;:&#34; 333&#34;&#34;时间&#34;:15697128,&#34;标签&#34;:&# 34;测试&#34;}]&#39;

  3. 在上面的属性中我想传递结束属性值,如: -

    在&#34; 1619712&#34;的地方的图表范围内我想通过&#34;结束&#34; + 2 * 50000 在&#34; 15697128&#34;的地方的事件数据中我想通过&#34;结束&#34; + 50000

    为此我也尝试了这个图表 - 范围=&#39; {&#34; x&#34;:[&#34; dynamic&#34; ,{{requestBody.end}}] ,,&#34; y&#34;:[0,100]}&#39;

    现在我已根据我的要求在requestBody计算函数中设置了结束属性值(_getRequestBody)。现在我的问题是我想在我的另一个计算函数中得到这个结束属性值(_chartExtents的n是(_getChartExtents)我希望将此结束attirbute值(我们将从请求体获得)传递给xDynamic(这是属性的chartExtents)

    1. 因为我想传递name属性中的uri值,该属性在requestBody属性中定义,我设置为
    2. this.set(&#39; requestBody.tags.0.name&#39;,uri);在_urichanged回调哪个工作正常现在我的问题是在定义或声明聚合物属性命名为requestBody时我不想传递名称属性中的任何硬编码值我试过&#34; name&#34;:&#34;&# 34;和&#34;名称&#34; :this.uri,&#34; name&#34; :uri,但无法获得价值。

      注意:uri来自另一种聚合物成分,在某些情况下来自全球变量。

      请告诉我如何在不传递任何硬编码值的情况下声明name属性值。

      有人可以帮助我吗?

      提前致谢。

1 个答案:

答案 0 :(得分:0)

  
      
  1. 我想动态设置结束属性值(在requestBody属性值中定义)...
  2.   

不是一个令人满意的答案,但它应该工作,因为聚合物做脏检查。聚合物有时会更新属性,但在这种情况下不会,所以尝试通过首先使元素无效来覆盖脏检查。

    _uriChanged: function(uri) {
      if (this.requestBody.start) {
      var clonedObj = JSON.parse(JSON.stringify(this.requestBody);
      clonedObj.tags.0.name = uri;

      this.set('requestBody', {});
      this.set('requestBody', clonedObj);
      this.$.Request.generateRequest();
    }

同样,不应该这样做。我最重要的是使requestBody成为一个计算值,而不是设置特定值,

   properties: {

     requestBody:{
              type: Object,
              computed: '_getRequestBody(uri)'
            },

      // Other properties, like uri

    }


    // Other javascript methods

    _getRequestBody: function(uri) {
       var defaultURI = 123333;  // I would make this a property or add a default value to 'uri'
       uri = (uri) ? uri : defaultURI;
       return {
                  "start": 11111,
                   "end": uri,   // Here's the change
                  "tags": [
                    {
                    "name" : "/asset/India/rotor",
                    }
                  ]
               };
        },

请注意,无论是否定义了属性(在这种情况下为computed),uri都将运行。有时,使用事件处理程序(观察者)时,属性的顺序很重要,因此将这些属性放在属性中。

  
      
  1. 我想动态传递此结束属性值...

         

    图表-程度=&#39; {&#34; X&#34;:[&#34;动态&#34;,1619712],&#34; Y&#34;:[0100]}&#39 ;

  2.   

你不应该传递这样的变量,而是使用chart-extents='[[myObject]]'之类的东西;但是,对于此特定解决方案,其中一个键取决于另一个变量(在这种情况下为对象requestBody)。

   chart-extents="[[_getChartExtents(requestBody.end)]]"

   ---

   // Other javascript methods

   _getChartExtents: function(xDynamics) {
      return {"x":["dynamic",xDynamics],"y":[0,100]};
   },

方法名称之前的_只是我的编程习惯,所以我可以看到方法和属性没有被其他元素使用。

  
      
  1. 因为我想传递name属性中的uri值,该属性在requestBody属性中定义,因为我设置为this.set(&#39; requestBody.tags.0.name&#39;,uri);
  2.   

只需延长答案1.

    _getRequestBody: function(uri) {
       var defaultURI = 123333;  // I would make this a property or add a default value to 'uri'
       uri = (uri) ? uri : defaultURI;
       return {
                  "start": 11111,
                   "end": uri,
                  "tags": [
                    {
                    "name" : uri,  // Here's the change
                    }
                  ]
               };
        },

希望这有效或给你一些新的见解。祝你好运!