Polymerの空の値計算された属性

Question

Polymerで計算された属性を使用しようとしていますが、私は常に空の値を取得します。この場合、datagraphというカスタム要素に属性があります。また、サーバーへの投稿リクエストを作成し、JSONファイルを取得し、結果を計算して表示します。これは私のカスタム要素です：

<dom-module id="cost-card"> 
    <template> 
    <style> 
     p.datos3{ 
     color: #10cebc; 
     text-align: center; 
     font-size: 22px; 
     margin-top: 0px; 
     } 
    </style> 
    <p class="datos3">{{datagraph}}</p> 
    </template> 
    <script> 
    Polymer({ 
     is: "cost-card", 

     properties:{ 
    usr:{ 
     type: Number, 
     value: 2 
    }, 
    command:{ 
     type: String, 
     value: "SP_GetCostoCampania" 
    }, 
    datagraph:{ 
     type: Number, 
     computed: 'getCost(command,usr)' 
    } 
    }, 

     getCost: function(command,usr){ 

     var options = { 
      hostname: 'localhost', 
      path: '/', 
      port: 8081, 
      secure: false, 
      method: 'POST', 
      headers: { 
      'x-powered-by': 'HTTPClient.js' 
      }, 
      'Content-Type': 'application/json' 
     } 

     var innerCost; 

     var example1 = new HTTPClient(options); 
     example1.post("/executeGraph1?command="+ command + "&param1=" + usr, function (err, res, body) { 

      body = JSON.parse(body); 

      innerCost = body[0].price * body[0].exchengeRate; 
     }); 

     return innerCost; 
     } 
    }); 
    </script> 
</dom-module> 

私は特急サーバーを実行している、情報が正しく配信されているが、{{}} DataGraphのタグが空に保ちます。私はそれはポストリクエストが任意のタスクであり、その値が後で提供されるためかもしれないと思うが、私は同じ結果でプロミスを使ってみた。

誰でもこれを行う適切な方法を知っていますか？

Answer 1

getCostは、return innerCostがポストのコールバックより前に実行されるため、常に未定義を返すことがあります。

Computed propertiesは、引数として他のプロパティを取り込むことを意味し、同期するように設計されています。 getCostが何らかの引数を取った場合でも、コールバック内に直接this.datagraphを設定するオブザーバを使用したいと思うでしょう。

getCostに引数を入力していないので、代わりにready callbackを使用してポストリクエストを行い、コールバック内にthis.datagraphを設定することをお勧めします。例えば

：

Polymer({ 
    is: "cost-card", 

    properties: { 
     usr: { type: Number, value: 2 }, 
     command: { type: String, value: "SP_GetCostoCampania" }, 
     datagraph: Number 
    }, 

    observers: [ "getCosto(command, usr)" ], 

    getCosto: function (command, usr) { 

     var options = { 
      hostname: "localhost", 
      path: "/", 
      port: 8081, 
      secure: false, 
      method: "POST", 
      headers: { "x-powered-by": "HTTPClient.js" }, 
      "Content-Type": "application/json" 
     }; 

     const uri = `/executeGraph1?command=${command}&param1=${usr}`; 
     new HTTPClient(options).post(uri, (err, res, body) => { 

      // values have changed, ignore result (ideally cancel the HTTP request) 
      if (command !== this.command || usr !== this.usr) return; 

      body = JSON.parse(body); 

      this.datagraph = body[ 0 ].price * body[ 0 ].exchengeRate; 

     }); 

    } 

});