Question

你好，互联网的人，

我正在尝试使用Polymer示例代码段，但似乎无法获得以下代码段示例，以便观察行为正常：

<link rel="import" href="../../components/polymer/polymer.html">

<polymer-element name="my-element">
   <template>
     <div>{{thing.color}}</div>
     <button on-tap="{{changeColor}}">Change color</button>
     <p>{{message}}</p>
   </template>
 <script>
    Polymer({
      message: '',
      created: function() {
        this.thing = {
          color: 'red'
        };
      },
      observe: {
        'thing.color': 'colorObserver',
      },
      colorObserver: function(oldValue, newValue) {
        this.message = 'Color changed from ' + oldValue + ' to ' + newValue;
      },
      changeColor: function(e) {
        this.thing.color = this.thing.color === 'red' ? 'green' : 'red';
      }
    });
  </script>
 </polymer-element>

...“红色”或“绿色”文字的颜色不会切换，但消息文字显示正常。

指向我遇到此次要问题的特定Polymer代码示例代码段的链接如下： https://github.com/PolymerLabs/polymer-patterns/blob/master/snippets/observing-changes/watching-for-changes-to-a-nested-object.html

我正在使用Chrome开发者编辑器中的示例代码段模板，并再次：网页按钮正常工作，并显示正常的文字，但唉，文字颜色“红色”或“绿色”不会显示。我已经对组件包运行了bower更新，并且JavaScript控制台中没有错误。

注意：还有另一个聚合物片段模板可以做一些非常相似的事情（切换文字颜色），效果很好，链接在这里：

https://github.com/PolymerLabs/polymer-patterns/blob/master/snippets/basics/binding-to-a-style.html

<polymer-element name="my-element">
  <template>
    <p>My favorite color is <span style="color:{{color}}">{{color}}</span>.</p>
    <button on-tap="{{toggleColor}}">Toogle color</button>
  </template>
 <script>
  Polymer({
    color: 'red',
    toggleColor: function() {
      this.color = this.color === 'red' ? 'green' : 'red';
    }
  });
</script>

所以，在这一点上，我并不自信我理解观察功能是如何工作的，并且作为一个元问题：任何人都可以建议如何解决这类问题吗？并且还是指向一个可能有助于解决这类问题的资源？（假设没有明显的错误）。

提前致谢

Answer 1

那是因为你没有＆＃34;实际上＆＃34;将thing.color绑定到适当的css属性：

<div style="color: {{thing.color}}">{{thing.color}}</div>

用于观察的聚合物代码示例代码段不会更改文本颜色

1 个答案: