CODEWITHSUNDEEP
javascriptpolymerpolymer-1.0
Marplex
Marplex

Reputation: 23

Polymer 1.0 change bind with Javascript in <template> dom-repeat

I don't know how to edit a bind(variable) from tag

<template is="dom-repeat" items="{{ajaxResponse}}">
  <script>
        var temp = {{item.title}};
        //I want to do this
        {{item.title}} = temp.slice(1, 10);
  </script>      
  <google-map-marker latitude="{{item.lat}}" longitude="{{item.lng}}" title="{{item.title}}"> </google-map-marker>
</template>

Thanks in advance

Upvotes: 1

Views: 124

Answers (2)

Scarygami
Scarygami

Reputation: 15569

You can use a computed binding.

<google-map-marker title="[[updateTitle(item.title)]]"></google-map-marker>

If you are inside your own custom element you can just add the function to the element description:

Polymer({
  is: 'your-element',
  updateTitle: function (title) {
    return title.slice(1,10);
  }
});

Or if you are in a dom-bindyou can define that function on the template element.

<template is="dom-bind" id="app">
  ...
</template>

<script>
  document.getElementById('app').updateTitle= function (title) {
    return title.slice(1,10);
  };
</script>

Upvotes: 1

Dmytro
Dmytro

Reputation: 345

If you want to change ajax response, it is the best to make it through on-response event. Little change this

<template is="dom-repeat" id="ironList" items="[]">
<google-map-marker latitude="{{item.lat}}" longitude="{{item.lng}}" title="  {{item.title}}"> </google-map-marker>
</template>

Then you need to add function to on-response event to iron-ajax element.

<iron-ajax on-response="responseFunc"

and then describe it func:

responseFunc: function(e) {
//receive all response data in array
var items = e.detail.response;
//perform your operations
var item = items[0]; 
var temp = item.title;
item.title = temp.slice(1, 10);
//add you changed data to template
this.$.ironList.push('items', item);
}

If you have a lot of arrays in response object, you can easily use a loop.

Upvotes: 0

Related Questions