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

Question

我有下面的一段代码，我使用 Iron ajax 和聚合物来调用 http 请求，因此使用聚合物属性传递 body 和 last-response 的值。正如我们在这里看到的那样，我们有 requestBody 聚合物属性在 requestBody 中不返回任何值所有值都是硬编码的，例如标签下的开始和结束以及名称。

        <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 动态设置 end 属性值（在 requestBody 属性值中定义）：this.set('requestBody.end', "1113444");在 _uriChanged 中，但是没有用。

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

chart-extents='{"x":["dynamic",1619712],"y":[0,100]}' 
event-data='[{"id":"333","time":15697128,"label":"test"}]'

在上面的属性中，我想传递 end 属性值，例如：

在“1619712”位置的图表范围中，我想通过“结束”+ 2*50000 在“15697128”位置的事件数据中，我想通过“结束”+ 50000

为此，我也尝试过这样的 chart-extents = '{"x":["dynamic" , {{requestBody.end}}] , ,"y":[0,100]}'

现在我已经根据我的要求在 requestBody 计算函数 (_getRequestBody) 中设置了 end 属性值。现在我的问题是我想在我的另一个计算函数中获取这个 end 属性值 (_chartExtents 的 n 是 (_getChartExtents)我想将这个结束属性值（我们将从请求正文中获得）传递给 xDynamic（这是 chartExtents 的属性）

1. 因为我想在 name 属性中传递 uri 值，该属性在 requestBody 属性中定义，所以我设置如下

this.set('requestBody.tags.0.name', uri);在 _urichanged 回调中工作正常，现在我的问题是在定义或声明名为 requestBody 的聚合物属性时，我不想在 name 属性中传递任何硬编码值，因为我尝试了“name”：“”和“name”：this.uri，和 "name" : uri ，但无法获取值。

注意：uri 来自另一个聚合物组件，在某些情况下它来自全局设置变量。

如何在不传递任何硬编码值的情况下声明名称属性值？

Answer 1

1. 我想动态设置 end 属性值（在 requestBody 属性值中定义）...

不是一个令人满意的答案，但它应该像 Polymer 进行脏检查一样工作。 Polymer 有时会在更新属性时遇到问题，但在这种情况下不会，因此请尝试通过首先使元素无效来覆盖脏检查。

    _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",
                    }
                  ]
               };
        },

请注意，无论是否定义了属性（在本例中为uri），computed 都会运行。有时，在使用事件处理程序（observers）时，属性的顺序很重要，因此请将它们放在属性中。

1. 我想动态传递这个 end 属性值...

   chart-extents='{"x":["dynamic",1619712],"y":[0,100]}'

你不应该像这样传递变量，而应该使用像 chart-extents='[[myObject]]'这样的东西；但是，对于这个特定的解决方案，其中一个键取决于另一个变量（在本例中为对象 requestBody）。

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

   ---

   // Other javascript methods

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

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

1. 因为我想在 requestBody 属性中定义的 name 属性中传递 uri 值，所以我设置为 this.set('requestBody.tags.0.name', uri);

只需扩展答案 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
                    }
                  ]
               };
        },