Polymer 1.0 更改绑定 Javascript in <template> dom-repeat

Question

我不知道如何从标签编辑绑定（变量）

<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>

提前致谢

Answer 1

如果你想改变ajax响应，最好通过on-response事件来实现。稍作改动

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

然后你需要给iron-ajax元素的on-response事件添加函数。

<iron-ajax on-response="responseFunc"

然后描述它 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);
}

如果响应对象中有很多数组，可以轻松使用循环。

Answer 2

您可以使用 computed binding.

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

如果您在自己的自定义元素中，您可以将函数添加到元素描述中：

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

或者如果您在 dom-bind 中，您可以在 template 元素上定义该函数。

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

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

Polymer 1.0 更改绑定 Javascript in <template> dom-repeat

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

javascript

polymer

polymer-1.0