Polymer iron-ajax: how to bind data from an input element to the body-ajax attribute for a body

Question

Recently, I had problems binding data from the input element to the body-ajax body attribute. When I used core-ajax for polymer 0.5, I can easily bind these values:

<core-ajax id="ajax" method="POST" contentType="application/json" url="{{url}}" body='{"username":"{{username}}", "password":"{{password}}"}' handleAs="json" on-core-response="{{responseHandler}}"> </core-ajax> 

Now I tried the same with iron-ajax. But it sends literally "{{username}}" and "{{password}}" instead of its values. Here is the code:

 <iron-ajax id="ajax" method="POST" contentType="application/json" url="{{url}}" body='{"username":"{{username}}", "password":"{{password}}"}' handle-as="json" on-response="responseHandler"> </iron-ajax> 

How to make it work? Thank you for your responses:)

Answer 1

You can declare a computed property for the ajax body. Thus

 properties: { ... ajaxBody: { type: String, computed: 'processBody(username, password)' } }, processBody: function(username, password) { return JSON.stringify({username: username, password:password}); } 

And then adding it to iron-ajax

 <iron-ajax ... body="{{ajaxBody}}"></iron-ajax> 

Answer 2

Another option is to use Computed Bindings

Your code will look something like this:

 <iron-ajax ... body="{{getAjaxBody(username, password}}}" > </iron-ajax> <script> Polymer({ ..... getAjaxBody: function(username, password) { return JSON.stringify({username: username, password: password}); } }) </script>