以编程方式触发 Polymer 数据绑定更改？

Question

我正在使用 Polymer 的数据绑定来显示结构化数据。单击按钮后，我想更改数据项，但显示的 {{item.name}} 没有改变。

下面的例子我做错了什么？

我尽量简化了！

<template id="bind" is="dom-bind">
  <script>
    bind.changeName = function() {
      var repeater = document.querySelector('#repeater');
      repeater.items[0].name = 'New Name' //doesn't work
      repeater.set('items#0.name', 'Another New Name'); // doesn't work as well

    }
  </script>
  <paper-button on-click="changeName">Change name</paper-button>

  <template id="repeater" is="dom-repeat" items='[{"name": "Foo", {"name": "Bar"}]'>
    <p>{{item.name}}</p>
  </template>
</template>

Answer 1

在 repeater.set() 中使用 'items.0.name' 而不是 'items#0.name'，#repeater 的预定义 items 数组中存在 { 不匹配.这是一个工作演示。

<html>  
<head>

  <title>Template me</title>
  
  <script src="https://rawgit.com/webcomponents/webcomponentsjs/master/webcomponents.js"></script>
  
  <base href="https://cdn.rawgit.com/download/polymer-cdn/1.0.1/lib/">
  <link rel="import" href="polymer/polymer.html">  
  <link rel="import" href="paper-button/paper-button.html">  

  
</head>
<body class="fullbleed">

<template id="bind" is="dom-bind">
  <script>
    bind.changeName = function() {
      var repeater = document.querySelector('#repeater');
      //repeater.items[0].name = 'New Name' //doesn't work
      repeater.set('items.0.name', 'Another New Name'); //<==== Now it works ===

    }
  </script>
  <paper-button on-click="changeName">Change name</paper-button>

  <template id="repeater" is="dom-repeat" items='[{"name": "Foo"}, {"name": "Bar"}]'>
    <p>{{item.name}}</p>
  </template>
</template>


</body>
</html>

以编程方式触发 Polymer 数据绑定更改？

Trigger Polymer data-binding change programmatically?

javascript

web-component

polymer